vertical-alignプロパティは、インライン要素やテキスト、テーブルセルの縦方向の揃え方を指定します。
vertical-alignプロパティの値とその効果の一覧
baseline– テキストのベースラインに揃えます。top– 要素を親ボックスの上端に揃えます。middle– 親要素の中央に揃えます。bottom– 要素を親ボックスの下端に揃えます。text-top– テキストの上端に揃えます。text-bottom– テキストの下端に揃えます。sub– インライン要素を下付き文字に揃えます。super– インライン要素を上付き文字に揃えます。20px– 任意の値で要素を指定位置に配置します（この例では20px）。
vertical-alignが効かない時の原因と対策
インラインまたはテーブルセル要素で使用していない
vertical-alignは、主にインライン要素（例: <img>、<span>など）やテーブルセル（<td>や<th>）に対して機能します。ブロックレベル要素（例: <div>）には適用されず、その場合効果が現れません。div内で位置を中央に指定するプロパティではありません。
対策: vertical-alignを適用したい要素がインライン要素であることを確認します。もしブロック要素に適用したい場合は、display: inline-block;などでインライン化します。例: <span style="vertical-align: middle;">テキスト</span>。
親要素との関係で期待通りに機能していない
vertical-alignは、要素とその親要素、もしくは隣接するインライン要素との垂直方向の整列を制御します。親要素の高さや他のインライン要素との関係が期待と異なると、効果がわかりにくいことがあります。
対策: 親要素や隣接するインライン要素の高さやレイアウトを確認し、vertical-alignが適用されるコンテキストであることを確認します。例えば、テキストや画像が隣接する要素との位置を正しく調整できるか確認します。
line-heightや他のプロパティとの競合
vertical-alignは、line-heightやheightプロパティと併用されることが多いですが、line-heightが期待と異なる設定になっていると、要素の垂直位置がズレてしまい、vertical-alignの効果が確認しにくくなります。
対策: line-heightやheightの設定を確認し、vertical-alignが正しく反映されるように調整します。例えば、line-heightを適切な値に設定してから、vertical-alignでテキストや要素の位置を調整します。
共通するCSSコード
.css-sample-inline {
display: inline-block;
width: 100px;
height: 50px;
background-color: lightblue;
margin: 10px;
}
vertical-align: baseline;
要素をテキストのベースラインに揃えます。カーソルで選択をして確認してみてください。
HTMLコード
<div class="css-sample-container">
<span style="font-size: 36px;">テキスト</span><span class="css-sample-inline css-sample-baseline">Baseline</span>
</div>
CSSコード
.css-sample-baseline {
vertical-align: baseline;
}vertical-align: top;
要素を親ボックスの上端に揃えます。
vertical-align: middle;
要素を親ボックスの中央に揃えます。
vertical-align: bottom;
要素を親ボックスの下端に揃えます。
vertical-align: text-top;
要素をテキストの上端に揃えます。
vertical-align: text-bottom;
要素をテキストの下端に揃えます。
vertical-align: sub;
要素を下付き文字として揃えます。
vertical-align: super;
要素を上付き文字として揃えます。
vertical-align: 20px;
要素を指定した20pxの位置に配置します。
まとめ
vertical-alignプロパティは、インライン要素の垂直方向の揃え方を制御します。- 異なる値を使って、親要素やテキストに対してさまざまな揃え方を指定できます。