Comment centrer les éléments div et span le long d'une même ligne?

Question

I recevant cet alignement laid:

I habitude travées de texte et des rectangles div à être centrées verticalement pour être visuellement dans une ligne. Voici mon code html:

\t <div> 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label1</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label2</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label3</span> 
 
\t </div>

Je ne peux pas utiliser la voie comme "fond avec coussinets: 5px;" parce que je génère ce code html par programmation et la taille de la police ainsi que la largeur div et la hauteur change fréquemment. Donc, ma question est de savoir comment aligner mes éléments dans le chemin, indépendamment de leurs tailles?

Answer 1

Vous pouvez utiliser vertical-align: middle comme ceci:

span, 
 
div { 
 
    vertical-align: middle; 
 
}

<div> 
 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label1</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label2</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label3</span> 
 
</div>

Alternativement, vous pouvez envelopper tout dans un conteneur flexible et aligner le centre des éléments. Ensuite, vous retirer margin: auto déclarations sur vos éléments HTML comme ceci:

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
span { 
 
    padding-left: 0.5rem 
 
}

<div class='flex'> 
 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label1</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label2</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label3</span> 
 
</div>

J'ai aussi ajouté padding-left aux éléments de portée afin qu'ils aient un peu l'espacement des étiquettes.

Answer 2

Vous pouvez utiliser vertical-align: top; sur tous les inline-blocks, mais vous devez utiliser des classes, et non les styles en ligne

.alignclass { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div> 
 
    <div class="alignclass" style="background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span class="alignclass" style="font-size: 30px;">label1</span> 
 
    <span class="alignclass" style="width: 50px;">&nbsp;</span> 
 

 
    <div class="alignclass" style="background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span class="alignclass" style="font-size: 30px;">label2</span> 
 
    <span class="alignclass" style="width: 50px;">&nbsp;</span> 
 

 
    <div class="alignclass" style="background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span class="alignclass" style="font-size: 30px;">label3</span> 
 
</div>

Answer 3

Peut-être que la hauteur de ligne peut résoudre votre problème,

<div> 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; line-height: 35px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label1</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; line-height: 35px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label2</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; line-height: 35px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label3</span> 
 
\t </div>