テキストの横にアイコンを並べたい

質問

先ほども別件で質問させていただいたものです。

ページの見出し（タイトル）部分のはじめに、アイコン（画像）を表示させたいのですが、どうしてもタイトルとぴったりと並んでくれません。

テーブルでガチガチに固めればできるのですが、タイトル部分だけでテーブルは使いたくありません。
このタイトルはh2扱いにしたいと考えておりますので、先ほど、cssでh2の背景にアイコンを設定してみたのですが、やっぱりダメでした。
完成イメージとしては、

◎「■■■」とは？

↑このようなものです。◎が画像になります。

よろしくお願いいたします。

回答No.2

naokita · ベストアンサー

<h2 style="padding-left:30px; background:url(○○.gif) no-repeat 0 50%;">「■■■」とは？</h2>

（１）padding-left:30px;　の30pxは、幅30pxの画像があるから頭文字を30pxだけ左にスペースを作るって事。だから画像の横幅分の幅+αのpxにする。
（２）○○　に画像URLパスを入れて画像を背景として表示。
（３）0 50%　これは、横が左からゼロの位置で縦が50％の位置って事。

数値等を変更して調整する事。

お礼

ありがとうございました。
cssはリンクで記述したかったので、アドバイスしていただいたものを書き換えてやってみたらきれいになりました。

回答No.1

steel_gray

うまく並ばないのは縦方向／横方向？
縦方向なら行内の位置合わせの方法をスタイルシートで指定します。
http://www.htmq.com/style/vertical-align.shtml
例
h2 img{ /*h2の中のimg*/
vertical-align:middle; /*中央にあわせる*/
}
うまく合わない場合、微調整をしたい場合は、参考URLを参考に数値や％での指定も試してみるといいかと思います。

なお、背景で指定する場合もbackground-positionで位置調整ができると思います。
http://www.htmq.com/style/background-position.shtml

横方向だと・・どういう状態／希望なのかちょっと想像できないので補足してください。

お礼

どうもありがとうございました。
とても参考になりました。