jQuery

【テキストを縦中央揃え】にするときに、【複数行のテキスト】でも!【親要素】がなくても! できるやり方!!

NKJ52 kurayaminekoのコピー

例)1行の場合

テキストが一行、と決まっていたらカンタンです。

[html]

<div>
<span>例)一行の場合</span>
</div>

[/html]

[css]

div {
height: 100px;
}

div span {
line-height: 100px;
}

[/css]

これで対応できます。ただし、複数行になる可能性がある場合、2行以上になると対応できなくなります。もともと【line-height】とは 行の高さを指定するプロパティです。一行なら親要素(div)の高さ(100px)とテキスト(span)の行の高さ(100px)が一致するため、こうなります。

サンプル1 【1行】

例)一行の場合

※ わかりやすくするために親要素(div)には背景色を付けてます。テキストは青にしてます。

例)2行以上の場合 → 一行だけでも2行以上になっても縦中央揃えになります

先ほどのやり方で2行以上になってしまうと、こうなります。

サンプル2 【2行以上(失敗)】

例)2行以上の場合
 → 一行だけでも2行以上になっても縦中央揃えになります

※ わかりやすくするために親要素(div)には背景色を付けてます。テキストは青にしてます。

一行目は先ほどと同様に親要素に対して中央揃えされてます。が、2行目がガバッと下に行ってしまってます。2行目以降の行にもそれぞれline-heightの100pxが効いてしまうんです。

じゃあどうするか?こうでしょう

[css]

div {
height: 100px;
}

div span {
display: table-cell;
vertical-align: middle;
height: 100px;
}

[/css]

サンプル3 【2行以上(成功)】

例)2行以上の場合
 → 一行だけでも2行以上になっても縦中央揃えになります

こうなります。これで複数行になってもならなくても対応できますね!
ちなみにこのブログでは見出し(h3)にも適用してます。が、この方法だとテキストの要素に親要素がないと成立しません。なので、jQueryでチョコチョコしてます。

おまけサンプル 【親要素がない場合】

[javascript]

jQuery("h3").wrapInner("<span></span>");

[/javascript]

見出し(h3)の中身のテキストをspanで囲んじゃいます。これでh3を親要素にして、テキストはspanが子要素の扱いになりますので あとは上記のやり方でOKです。

以上、@dutchisover でした (*´꒳`*)