当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【サンプルデモ】contentで挿入した画像の中心に元要素のテキストを配置する方法 - Webデザインラボ

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

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

サンプル画像

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

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

見出し1

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

見出し2

見出しに改行がある場合の表示例。

見出し3
見出し3