More than 5 years have passed since last update.

position:absoluteでもインライン要素だとtext-align:centerの影響を受ける

Posted at 2014-09-08

以下のdiv内のimgは、position:absolute を指定しているにも関わらず、divの真ん中あたりの妙な位置へ飛んでいきます。

<div id="parent_block">
	<img src="picture.png" id="child_img" />
</div>

#parent_block {
	position: relative;
	text-align: center;
}

#child_img {
	position: absolute;
}

よく見るとdivには text-align:center の指定があります。
text-align プロパティはインライン要素に反映するので、当然ながらimgタグも影響を受けます（position 指定がなんであっても）。

なので、displayプロパティにblockを指定してあげると万事解決です。

#child_img {
	position: absolute;
	display: block;
}