高さが可変の要素を上下中央揃えにする方法

Web制作 2016.07.06

こんにちは、高さをCSSで動的にいじることって案外むずかしいですよね。

例えばiFrameを内容に合わせて大きくするといったことなどが挙げられます。

今回は文章の追加などで高さが変わると想定される要素を親要素の上下中央揃えにした備忘録です。

実際のコードです。

HTMLは以下。

<div class="parent">
<p class="text-block">中央揃えになる部分</p>
</div>
div.parent{
height:500px;
}
p.text-block{
position:absolute;
top:0;
bottom:0;
margin-auto;
}

text-blockの高さが固定であればCSSで高さを設定し終了ですが、今回は可変なのでjavascriptで高さを動的に設定する必要があります。

要素の高さを取得し、javascriptで設定します。

$(function() {
var b = $('#text-block');
$('#pearent').height(b.height());
});

以上になります。

他にも色々な方法があるので目的にあった方法を選びましょう。

Hiroshi Uesugi

Toyonaka,Osaka

最後まで読んでいただきありがとうございます!
フロントエンドエンジニアとして、大阪でフリーランスとしてWeb制作をしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です