【 vertical-align 】テキストの配置を自由に変更する(垂直方向)~CSS入門~
このような方にオススメの記事
- テキストの配置を上下に指定する方法を知りたい方
- vertical-alignプロパティの使い方を知りたい方
- CSSの学習を始めたばかりの方
【 vertical-align 】プロパティで文字の配置を変更する
本記事では、cssで要素中に記述したテキストの配置を垂直方向に変更する方法について解説します。
前回、テキストの配置をX軸方向（水平方向）に変更する『text-align』について解説しました（水平方向編）。
今回は、Y軸方向（垂直方向）の配置を指定できる『vertical-align』について解説します。
contents
【vertical-align】プロパティについて
『vertical-align』とは、カスケーティングスタイルシートによると『 CSSのプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。』とされています。
つまりインライン要素に指定することで、垂直方向の配置を変更できます。
ここで、ブロック要素の高さを基準にして配置の変更ができるものだということに注意が必要です。
実際の使用例を見て解説していきたいと思います。
使用例
下記コードでは、vertical-alignプロパティに親ブロック要素の『基準』の行の上に配置する『top』,中央に指定する『middle』,下に配する『bottom』という値を指定しています。
このように、親ブロック要素の高さを基準として、上下の配置を指定することができます。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
※注意点
ここで注意していただきたいのが（というより僕が沼った。。）、配置を変更できるインライン要素の配置はあくまでブロック要素の行が基準となるということです。
どういうことかというと、先ほどのコードで『基準』というテキストがない場合は下記のようになります。
すべてが親要素の上に配置されていますが、vertical-alignプロパティは親要素の高さが基準となるため、親要素の高さが子要素の高さと同じである場合は、配置の変更ができません。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
vertical-align プロパティの値
| 値 | 効果 |
| baseline | 要素のベースラインを親要素のベースラインにそろえる |
| sub | 要素のベースラインを親要素の subscript-baseline に |
| super | 要素のベースラインを親要素の superscript-baseline に揃えます。 |
| text-top | 要素の上端を親要素のフォントの上端に揃えます。 |
| text-bottom | 要素の下端を親要素のフォントの下端に揃えます。 |
| middle | 要素の中央を親要素の baseline + x-height の半分 に揃えます。 |
上下の配置変更と左右の配置変更
今回は、インライン要素の垂直方向配置の指定方法について解説させていただきました。
cssプロパティを感覚的に使うより、そのプロパティ、値をどのように指定する必要があるのか正確に把握して覚えていった方が習得が早いと思います。
text-alignで要素の水平方向配置を変更できたからvertical-alignも同じように使おう！！と思い使ってみるとイメージ通りに表示されません。
親ブロック要素の中のインライン要素の配置の変更の解説ができたので、次回は親ブロック要素内のブロック要素の配置を変更する方法について解説したいと思います。
ありがとうございました。
ABOUT AUTHOR
シュウヘイ
フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。
