【CSS】要素を親要素の上下中央に表示する方法

要素を親要素の上下中央に表示したい、ということはサイトを作っていてよくあると思います。

たとえば、テキストと画像が横並びになっていて、テキストの分量が増えても画像を上下中央に表示したい、という場合など。

そんなときの方法を紹介します。まずはHTMLから。

<div>
	
	<p>こちらの分量が増えても、buttonを中央に表示したい</p>
	<p><img src="button.gif" alt="ボタンの画像" ></p>
	
</div>

次に、CSS

p{
	display: table-cell;
	vertical-align: middle;
	 display:inline; //IE6,7対策
	 zoom:1; //IE6,7対策
}

display:table-cellで自動的に横並びになるので、floatなどは不要です。

なお、上記のCSSでdisplay:inline;とzoom:1;の前に全角スペースがあるのは、IE6、IE7だけに反映させるためのCSSハックです。

  • このエントリーをはてなブックマークに追加

PICxPIC

会社を経営する30代男性。iPhoneアプリをつくったりしながら毎日ぴくぴく生きてます。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE
  6. NO IMAGE

コメント

コメントをお待ちしております