vertical-alignが効かないパターンと、効くパターン

HTMLコーディング初心者の前に立ちはだかりがちなのが、vertical-alignかもしれません。わたしも「なんで効かないんだよおおおお」とパソコンを投げたくなることが何度もありました・・・。

この記事では、vertical-alignが効かないパターン、効くパターンをそれぞれ紹介していきます。ぜひ実際にご自身でコードを書いて肌で覚えていてもらえたらと思います。

vertical-alignは使わなそうな雰囲気出していますが、実はまあまあ使います。

はにわまん

初心者キラーのvertical-alignのポイントをまとめました！

vertical-alignが効かないパターン

「vertical-alignが効かない！」パターンをまとめました。

ほとんどがブロック要素に使われているパターンかと思います。

ブロック要素に使っている

vertical-alignはインライン要素同士での縦の位置を調整するためのプロパティです。なのでブロック要素に当てて上下を調整しようとしても効きません！

例としては以下のような感じですね。「中央にしたい」の要素（もしくは親要素）にvertical-align: middle;を指定して「なんで効かないだ・・・」って経験は誰しもがあると思います。

こんな感じでvertical-align: middle;を指定したところで上から一切動こうとしません笑

<div class="box">
	<div class="box-item">
		中央にしたい
	</div>
</div>

.box {
	width: 300px;
	max-width: 100%;
	height: 200px;
	padding: 12px;
	background: #eee;
}

.box-item {
	display: block;
	border: 1px solid rgba(0, 0, 0, 0.16);
	padding: 8px;
	background: #fff;
	vertical-align: middle;
}

vertical-alignは、こういうボックスの中での上下中央を指定するためのプロパティではありません！！！まずはこの事実を覚えておきましょう・・・。

ちなみに、ボックスの中での上下中央を揃えたいなら、flexの必殺技を使うといいかと思います。今回の例だと、.boxに以下のプロパティと値を追加する感じになります。

.box {
	display: flex;
	align-items: center;
	justify-content: center;
}

flex凄い・・・

浮いている要素

position: absolute;やposition: fixed;、floatなどで浮いている要素では、vertical-alignは効きません！

table-cellを加えて一緒に使ってもダメです！

具体的には以下のような感じですね。この書き方で上下中央に揃えようとしても揃いません。

.icon {
	position: absolute;
	top: 0;
	right: 8px;
	width: 50px;
	height: 50px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

position: absoluteには、vertical-alignは効きません！

— はにわまん (@haniwa008) 2018年11月19日

vertical-alignはどこで使う？

おそらく多くの人がvertical-align: middle;で勘違いしているのが、以下のようにボックスの中で上下の中央寄せができると思っている点だと思います。

実はこれは、vertical-alignでは実現できません！まずはこの現実を知ることからスタートかもしれません…

vertical-alignは、インライン要素とインライン要素の縦の位置関係を調整するためのプロパティだと覚えてもらえたらと思います。

inline-blockの並びで使う

vertical-alignとセットでよく使うのが、display: inline-blockだと思います。

例として高さの違うdisplay: inline-blockを横に並べてみましょう。以下のようになります。

<div class="items">
	<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur fuga voluptatibus dignissimos error eius ullam voluptate ut! Debitis totam rem, dolorum ab quaerat fuga tempora.</div>
	<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur</div>
	<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur fuga voluptatibus dignissimos error eius ullam voluptate</div>
</div>

.item {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.16);
	display: inline-block;
	margin: 16px 0;
	padding: 8px;
	width: 30%;
}

.itemにdisplay: inline-block;が適応されているので、インライン的に横並びになっています。そして、それぞれ下の方で揃っているかと思いますが、これはデフォルトのvertical-align: baseline;が適応されている状態ですね。

では、vertical-align: middle;にするとどうなるでしょうか？

.item {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.16);
	display: inline-block;
	margin: 16px 0;
	padding: 8px;
	width: 30%;
	vertical-align: middle;
}

中央に揃ったのが分かるかと思います。vertical-alignは何かの親要素に対しての上下中央ではなく、隣あっている要素間での関係性を表すためであることがなんとなく分かってもらえるかと思います。

ただしtable-cellではflexっぽく使える

先ほど、「vertical-alignは親要素に対しての上下中央ではない！インライン要素同士の縦の関係を指定するもの！」と力説しましたが、、display: table-cellでは、縦の高さの中で中央揃えになります（深く考えずにtable-cellだけは、「こういうもの」だと思っておいた方が幸せです）

<table class="table">
	<tr>
		<td>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto cum dignissimos totam. </td>
		<td>Lorem ipsum dolor</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat</td>
		<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat id aspernatu</td>
	</tr>
</table>

.table {
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-collapse: collapse;
}

.table th,
.table td{
	border: 1px solid rgba(0, 0, 0, 0.16);
	padding: 12px;
	vertical-align: middle;
}

画像

デザインを厳密に再現しようと思った時に、「画像の上下（どちらか）に謎の隙間がある！」って事象に出会うかもしれません。これもvertical-alignがないことによって変な浮き方をしてしまうようです（詳しくは知らない・・・）

とりあえず、imgとvertical-alignをセットで使うという運用をしていれば回避することができます。

わたしは標準の画像にとりあえずで以下のような指定を当てています。vertical-alignはtopかbottomがおすすめです。

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

📝 display:inline-blockはvertical-alignとセットで使う

「なぜか高さが合わねー」って現象は、画像（img）やinline-blockの箇所で起こりやすいです。

inline-blockやimgとvertical-alignはセットで使うと幸せになれます。

例）
img {
max-width: 100%;
height: auto;
vertical-align: top;
}

— はにわまん (@haniwa008) 2018年8月17日

おわり

vertical-alignが効かないパターンと、効くパターンを紹介しました。

覚えておいてほしいのは以下の3つです。

• ブロックの中の要素の上下の位置を指定するものではない
• インライン要素同士の縦の関係を指定するも
• ただしtable-cellでは中の要素の位置を指定する感じになる

HTMLコーディング初心者の前に立ちはだかりがちなのが、vertical-alignかもしれません。実際に自分で色んなパターンのコードを書いて覚えていってもらえたらと思います！