【テキストを縦中央揃え】にするときに、【複数行のテキスト】でも!【親要素】がなくても! できるやり方!!
例)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行以上になっても縦中央揃えになります
※ わかりやすくするために親要素(div)には背景色を付けてます。テキストは青にしてます。
一行目は先ほどと同様に親要素に対して中央揃えされてます。が、2行目がガバッと下に行ってしまってます。2行目以降の行にもそれぞれline-heightの100pxが効いてしまうんです。
じゃあどうするか?こうでしょう
[css]
div {
height: 100px;
}
div span {
display: table-cell;
vertical-align: middle;
height: 100px;
}
[/css]
サンプル3 【2行以上(成功)】
→ 一行だけでも2行以上になっても縦中央揃えになります
こうなります。これで複数行になってもならなくても対応できますね!
ちなみにこのブログでは見出し(h3)にも適用してます。が、この方法だとテキストの要素に親要素がないと成立しません。なので、jQueryでチョコチョコしてます。
おまけサンプル 【親要素がない場合】
[javascript]
jQuery("h3").wrapInner("<span></span>");
[/javascript]
見出し(h3)の中身のテキストをspanで囲んじゃいます。これでh3を親要素にして、テキストはspanが子要素の扱いになりますので あとは上記のやり方でOKです。
以上、@dutchisover でした (*´꒳`*)