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

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

サンプル画像

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

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

見出し1

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

見出し2

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

見出し2-2
見出し2-2

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

見出し3

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

見出し3-2
見出し3-2

 

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

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

見出し4
見出し4