2014/11/03(月)

擬似要素で生成された画像を縦方向にセンタリングするソリューション このエントリをはてなブックマークに追加 

Filed under: CSS,WEB制作 — KAY @ 11:58:06


以下のサンプルをご覧ください。

TWECOCaq_normalサンプル1
サンプル2

こちらは以下のようなコードになっています。

CSS
#my_sample1 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample1 img {
vertical-align:middle;
}
#my_sample2 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample2:before {
content:url(http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg);
vertical-align:middle;
}

HTML
<span id="my_sample1"><img src="http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg" alt="TWECOCaq_normal" width="48" height="48">サンプル1</span>
<span id="my_sample2">サンプル2</span>

サンプル1はimg要素、サンプル2は::beforeによって生成された画像です。
どうも、擬似要素の画像はimg要素と違ってvertical-align:middle;じゃセンタリングされないみたいですね。しかも、なんか下に空白ができてるし……。この空白は恐らく縦の揃え位置がbaselineになっているためでしょう。

結論から申し上げますと、CSSでこのように指定してやると、縦にセンタリングされます。

#my_sample3 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample3:before {
content:url(http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg);
line-height:0;
vertical-align:-16px;
}

サンプル3

まず、line-height:0;で下の空白を消します。そして、vertical-alignにマイナスの値をいい感じに指定してやります。
いい感じというのは具体的に言うと、

(画像の高さ – フォントの高さ) / 2

です。このサンプルの場合だと、画像の高さが48pxでフォントが16pxなので、

(48 – 16) / 2 = 16

というわけで-16pxを指定しているわけですね。

ちなみに、このような形で擬似要素を使わなければならないケースは稀だと思います。
タグで表現して問題ない場合はそれこそサンプル1のように記述すればいいだけですし、そうでなくても通常はbackgroundで事足りるでしょう。
今回の場合、ポイントは実はtext-align:center;の部分で、「センタリングされた任意の長さの内容テキストの直前に画像を配置したい!」というケースでした。
backgoundだとちょっと難しいですよね。

さて、解決したはいいものの、どうやら擬似要素による生成画像はimg要素とは違ったレンダリング規則が適用されてるみたいですが、どういったアレでこんな事態になってるのかは未だ謎です。

コメント(0)

No comments yet.

トラックバック(0)

この記事へのトラックバックはありません。

RSS feed for comments on this post. TrackBack URL

Leave a comment