2012年4月アーカイブ

CSSを勉強するのに役立つWebサービス・サイトをご紹介します。

テキスト中に小さい画像をきれいに縦方向を揃えて表示したい場合は、vertical-alignを使用します。

(X)HTMLコード

<p>
あいうえお<img src="image.gif" alt="" class="middle" />かきくけこ
</p>

CSSコード

.middle {
   vertical-align:middle;
}

画像をコンテンツの中央に配置したい場合は、marinを使います。ポイントは、画像を表示するimgタグはインライン要素ですがそれではmarinが有効にならないので、ブロック要素にすることです。

(X)HTMLコード

<img src="image.gif" alt="" class="center" />

CSSコード

.center {
   display:block;
   margin:0 auto;
}