divとspan要素を同じ行に沿って中央に配置する方法は？

Question

私はこの醜いアライメント受光：

をIテキストスパンとのdiv矩形が一列に視覚的になるように垂直にセンタリングする習慣。私のような方法で使用することはできません

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

：ここに私のhtmlコードである "paddindボトム：5pxの;" をなぜなら私はこのHTMLコードをプログラム的に生成し、フォントのサイズとdivの幅と高さは頻繁に変わるからです。だから私の質問は、サイズから独立して、方法で私の要素を整列する方法ですか？

Answer 1

を使用する必要があります。

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>

---

また、すべてをフレックスコンテナにラップし、アイテムの中心を揃えることもできます。そして、あなたはそうのようなあなたのhtml要素にmargin: auto宣言を削除します：彼らはラベルから少し間隔を有するよう

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

は、私はまた、スパン要素にpadding-leftを追加しました。あなたの問題を解決することができます

Answer 2

あなたはすべてのそれらのinline-blocksにvertical-align: top;を使用することができますが、あなたはあなたがそうのようなvertical-align: middleを使用することができ、クラスではなく、インラインスタイル

.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

たぶん、行の高さ、

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