CSS で画像と文字を揃える

2010年5月31日月曜日

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;
}

これにより、右図のように表示される。

マーカーの中心に文字の位置を合わせるには、マーカーをリスト項目の背景画像として設定する。

#list0 li { 
	list-style: none;
	background: url("star.png") no-repeat top left;
	padding: 15px 0px 15px 60px;
}

文字が真ん中に位置するように padding で上下の間隔を調整する。

画像と文字の位置を、垂直方向に真ん中で揃えたい場合は vertical-align を使う。

<img src="star.png" style="vertical-align:middle;" />
<span >hoge piyo fuga</span>

水平方向に対して、要素を中央に配置したい場合は text-align を用いる。

text-align が適用される対象は、

Applies to: block-level elements, table cells and inline blocks

(16.2 Alignment: the 'text-align' property より)

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;" />

しかし、不思議なのは要素を中央に配置するの指定が

text-align

であって、なぜ horizontal-align ではないのだろう？

vertical-align

と意味的に対になるなら horizontal-align の方が忘れにくいのに。

仕様を見ると Cascading Style Sheets, level 1 では、Text properties 節に各々含まれている。

すぐに忘れる脳みそのためのメモ