Web制作

【jQuery+CSS】vertical-align:middleをレスポンシブに対応させる【Bootstrap】

2023.10.10

Written by o-saka

CSSで縦（上下）に中央寄せをする際にはdisplay:table-cell、vertical-align:middleを使用しますが、高さを指定しなければいけません。レスポンシブサイトを構築する際に、ウインドウサイズによって、要素の高さが異なる場合の対処方法をご紹介いたします。

HTML

下記はbootstrapでd-table-cell、align-middleを指定しています。

html

<div class="row">
  <div class="col-6">
    <div class="img-height">
      <img src="img/examlple.png" class="img-fluid" />
    </div>
  </div>
  <div class="col-6">
    <p class="d-table-cell align-middle p-height">あいうえお</p>
  </div>
</div>

これだけでは上下中央揃えはできず、<p>に対して高さを指定しなければいけません。ですが、レスポンシブ環境ではexmaple.pngの高さが可変するためこの数値を取得してリアルタイムで<p>の高さを指定する必要があります、

<script>
//div.img-heightの高さを変数に格納
const storyImgHeight = $(".img-height").height();
//windowsリサイズ時に高さを再取得
$(window).resize(function () {
storyImgHeight = $(".img-height").height();
});
//変数をスタイルに適用
$(".p-height).css("height", storyImgHeight);
//windowsリサイズ時に高さを再取得
$(window).resize(function () {
$(".p-height").css("height", storyImgHeight);
});
</script>

上記で画像を囲っているdiv.img-heightの高さを取得、その高さを<p>のstyleに反映させています。

以上で完了です。