spanを垂直に中央に配置する(CSS) - WordPress 情報パッケージ
ベストセラー人気 WordPress テーマTop 30 詳細

spanを垂直に中央に配置する(CSS)

Last Updated:2022年9月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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「文書でさまざまな方法を確認できます。

メモ:



コメントを残す

コメント

この投稿は、クパンパートナーズの一部として一定額の手数料を受け取ることができます。 これにより、ブログの運営をサポートすることができます。

(不要な場合は戻るを押してください。)

あなたが正常に登録しています!