1. リストのマーカーとして画像を設定する
HTML でリストを書くには、ul, li 要素を用いる。
<ul id="list0"> <li>hoge</li> <li>piyo</li> <li>fuga</li> </ul>
このリストの項目の前に、マーカーとして画像(star.png) を付けるには、CSS で指定する。
#list0 { list-style-image: url("star.png"); list-style-position: inside; }
これにより、右図のように表示される。
- cf. list-style-image
- list-style-position
- 12.5.1 Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties
リスト項目の背景画像を設定
マーカーの中心に文字の位置を合わせるには、マーカーをリスト項目の背景画像として設定する。
#list0 li { list-style: none; background: url("star.png") no-repeat top left; padding: 15px 0px 15px 60px; }
文字が真ん中に位置するように padding で上下の間隔を調整する。
2. 画像と文字を揃える
a. 要素を垂直方向に対して、中央で揃える
画像と文字の位置を、垂直方向に真ん中で揃えたい場合は vertical-align を使う。
<img src="star.png" style="vertical-align:middle;" /> <span >hoge piyo fuga</span>
b. 要素を水平方向に対して、中央に配置
水平方向に対して、要素を中央に配置したい場合は text-align を用いる。
text-align が適用される対象は、
Applies to: block-level elements, table cells and inline blocks
div 要素の子要素として画像を配置。
<div style="text-align:center;"> <img src="star.png" /> </div>
または、display と 要素をセンタリング するための margin の設定を併用し、
<img src="star.png" style="display:block; text-align:center; margin:auto;" />
c. text-align と vertical-align
しかし、不思議なのは要素を中央に配置するの指定が
text-align
であって、なぜ horizontal-align ではないのだろう?
vertical-align
と意味的に対になるなら horizontal-align の方が忘れにくいのに。
CSS1
仕様を見ると Cascading Style Sheets, level 1 では、Text properties 節に各々含まれている。
CSS2.1
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification では、別々の節に分かれて説明されている。