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

2013.5.21 HTML/CSS 1a1e5b4712aa618adb53a2f077e2a205.jpg

こんにちは!  いわだて (@dutchisover) です!今回はこのブログで使用している、見出しとかタイトルとか、関連記事なんかで テキストを中央へ並べているやり方です。

NKJ52 kurayaminekoのコピー

例)1行の場合

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

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

サンプル1 【1行】

例)一行の場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最近の記事

Sponsored