web-dev-qa-db-ja.com

絶対位置のdiv内の水平方向の中央の動的画像

私はこの答えを求めてウェブ全体を調べましたが、絶対位置でdiv内の画像を水平方向に中央揃えするためには、画像の寸法を知る必要があるようですが、それは動的です。

これが私のhtmlです：

<header>
<div id="elogo">
    <img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">&#169; FTIeStore 2013 &bull; Privacy Policy</div>
</footer>

そしてここに私が使っている.cssがあります：

#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;

img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}

目標は、画像をページの下部/中央に留め、ブラウザウィンドウに合わせてサイズを変更することです。私がこれを過度に複雑にしている場合は、代替案を遠慮なく提案してください。

ここにjs.fiddleへのリンクがあります：

bottom-centered img-js.fiddle

cssimagedynamiccenter
12
Ben Cohn

絶対位置にしたい場合は、次のようにします。

http://jsbin.com/aveped/1/edit

img {
  width:20%;
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

親は相対的な位置を持っている必要があります。そうしないと、体に対して配置されます。これには幅は必要ありません。画像が非常に大きいため、幅を含めました。

61
user1721135

左=中央位置-画像の幅の半分

img {
   position: absolute;
   bottom: 0;
   left: 50%; /*half the container width*/
   margin-left: -250px; /*half the width of the image*/
}
0
Grant