CSSで鉛直方向に位置を調整する

2017-12-22

CSS で左右中央にする場合は margin, width や text-align を指定すればいいですが，上下中央にする場合は height を指定しても何も起きません．

いつも padding で頑張っていたのですが，Facebook の SNS ボタンをいじってて初めて気づきました．そんなことする必要なかったのではと．

インライン要素を上下中央に配置する

vertical-align というプロパティがあったのですね．CSS を触り始めて 3 年目に存在を知るという．

ここで気を付けなければならないのが，vertical-allign プロパティはブロックレベル要素には適用できないということです．インライン要素に指定したときだけ言うことを聞いてくれます．

しかも，インライン要素が含まれるブロックレベル要素に対して上下中央に配置されるわけでもないので，一見どこに使われるのかわかりません．

しかし，これのおかげで解決できる問題がありました．

Twitter や LINE の公式 SNS ボタンと並べると，なぜか Facebook だけ少し下の位置になっています．しかも，Android や PC の Chrome でずれているのに，iOS ではずれていなかったり．

調べてみると，Facebook の SNS ボタンは span 要素に vertical-align プロパティを設定しているらしく，なぜか bottom の設定．

というわけで修正します．

.fb-like span {
  vertical-align: initial !important;
}

どのクラスを指定してもいいですが，span 要素に適用する必要があります．また，vertical-align がこれもまたなぜかインラインで埋め込まれているので，!important にする必要があります．

それでは結局，ブロックレベル要素の鉛直方向の制御に関しては何の解決にもなってないと言われそうなので，こっちのほうも解決策を考えておきました．

<div class="box">
  <img src="test.jpg" />
</div>

.box {
  height: 400px;
}

img {
  position: relative;
  top: calc((100% - 200px) / 2);
  height: 200px;
}

これが一番簡単そうに書けるんじゃないでしょうか．

calc() 関数がまだ実験段階なので，正しく表示されないブラウザもあると思いますが，便利ですね．