【サンプルデモ】contentで挿入した画像の中心に元要素のテキストを配置する方法

使用する画像はこちらです。幅10px高さ40pxのpng画像です。

各コードは前のページでご確認ください。

1. contentプロパティで画像を指定しただけの場合は元の要素と画像の配置はこのようになります。

2. positionプロパティで画像の位置を指定、要素の高さはpaddingプロパティで調整。

改行があるとこのような表示になります。ワンポイント的な画像ならこの方法が画像も真ん中に来て良いのですが、画像を縦にリピートしたい場合はちょっと困ります。

3. こちらも2と同じくpositionプロパティで画像の位置を指定、要素の高さはheightプロパティで画像の高さ40pxを指定。

改行があると高さ決め打ちなのでこのような表示になります。

 

2と3の改行のないサンプルは同じ見え方になります。

4. 見出しが改行される可能性がある場合はcontentプロパティを使わず普通にbackgroundプロパティを使う方がいいかもです。