Implémenter l'alignement horizontal des éléments HTML dans un div

Question

J'ai trois objets HTML et je souhaite placer le bouton Précédent à gauche, le bouton Suivant à droite et le span au milieu dans un conteneur div.

<PRÉCÉDENT>
<p><br /></p>
<pre class="snippet-code-css lang-css Prettyprint-override"><code>
    {
        flotteur : gauche ;
    }
    #spanStage
    {
        poids de la police : gras ;
        alignement vertical : milieu ;
    }
    #btnSuivant
    {
        Flotter à droite;
    }</code>

<code>
        <input type="bouton" value="Précédent" id="btnPrécédent"/>
        <span id="spanStage">Étape 5</span>
        <input type="bouton" value="Suivant" id="btnSuivant"/>
    </div></code>

Answer 1

Le style « display:flex » est un excellent moyen de garder ces éléments sur la même ligne. Quel que soit le type d’éléments présents dans le div. Surtout si la classe d'entrée est un contrôle de formulaire, d'autres solutions comme le bootstrap, le bloc en ligne ne fonctionneront pas bien.

Exemple :

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
     <input type="button" value="Previous" id="btnPrevious"/>
     <span id="spanStage">Stage 5</span>
     <input type="button" value="Next" id="btnNext"/>
</div>

Plus de détails sur flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-direction : ligne, colonne

justify-content : flex-end, center, espace-entre, espace-autour

aligner les éléments : étirer, flex-start, flex-end, center

Answer 2

Ajoutez simplement text-align: center à votre wrapper pour définir l'alignement horizontal de tous les éléments enfants non flottants/non positionnés :

div{
    text-align:center;
}

Il n'y a pas d'autres éléments enfants en dehors de

<span>默认为内联元素。因此，您可以在它们上使用display:block并适当地对其进行样式设置，或者稍微调整父元素的样式。由于除了<span>和<button>, il est donc préférable d'utiliser cette solution simple.

Attention, text-align:<value>会从父元素继承，因此如果您想在包装器中包含其他内容，应该检查text-align:center是否适合您。否则，在特定元素中使用text-align:<value>，其中value可以是left、right、center或justify.

Démo JSFiddle