Wie zentriert div und überspannt Elemente entlang der gleichen Linie?

Question

I diese hässliche Ausrichtung empfangen:

I Text Spannweiten und div Rechtecken werden nicht vertikal in einer Linie zu sein, visuell zu zentrieren. Hier ist mein HTML-Code:

\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>

ich nicht die Art und Weise wie verwenden kann "paddind-bottom: 5px;" weil ich diesen HTML-Code programmatisch und Schriftgröße sowie div Breite und Höhe häufig ändert. Meine Frage ist also, wie man meine Elemente unabhängig von ihrer Größe in die richtige Richtung bringt?

Answer 1

Sie vertical-align: middle wie so verwenden:

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>

---

Alternativ können Sie alles in einen flexiblen Container verpacken und die Artikelmitte ausrichten. Dann würden Sie margin: auto Erklärungen auf Ihre HTML-Elemente entfernen, wie so:

.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>

ich auch padding-left auf die Spanne Elemente hinzugefügt, so dass sie ein wenig Abstand von den Etiketten haben.

Answer 2

können Sie verwenden vertical-align: top; auf all jene inline-blocks, aber Sie sollten Klassen verwenden, nicht Inline-Styles

.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

Vielleicht Zeilenhöhe Ihr Problem lösen können,

<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>