spanを垂直に中央に配置する（CSS）

spanタグ内のテキストを中央に配置する方法はいくつかに考えてみることができます。そのうちの一つが display：table-cellを使用することです。

CSSを使用してspanを垂直方向に中央揃えにする方法

CSSの例：

span { display: table-cell; padding-left: 10px; text-align: left; vertical-align: middle; }

DIV内のspanを中央揃えするには、DIVとspanのline-heightの値を同一に設定すると、簡単に中央に配置が可能です。

HTMLの例：

テキスト

CSS 예：

.parent { height: 20px; } .child { line-height: 20px; vertical-align: middle; }

.childのように要素名を使用する代わりに .parent> spanで処理することもできます。

別の方法として上記のよう display：tableを使用することもできます（参照).

.parent { display:table; } .child { display:table-cell; vertical-align：middle; }

Div内のテキストを垂直方向に中央揃えしたい場合Vertically align text within a div「文書でさまざまな方法を確認できます。