具有Z索引的圖像中心

Question

我正在嘗試創建頭像創建站點，但是圖像不會居中。 我嘗試了書中的所有內容。 有人對我要去哪里有任何想法嗎？

<img src="avatar/body_blue.png" class="body" id="body0"/>
<img src="avatar/body_green.png" class="body" id="body1"/>
<img src="avatar/body_grey.png" class="body" id="body2"/>
<img src="avatar/body_orange.png" class="body" id="body3"/>
<img src="avatar/body_purple.png" class="body" id="body4"/>

這是此CSS：

.body {
    z-index:7;
    position:absolute;
    width:575px;
    height:750;
    margin:0px auto;
    text-align: center;
}

您可以在此處實時查看 。

Answer 1

您可以嘗試使用

 .body {
 margin:0 auto;
 display:table;

}

Answer 2

我建議您稍微了解一下CSS，這是將任何內容居中的一個很好的例子。

http://www.w3.org/Style/Examples/007/center.en.html

Answer 3

解決方案是將<img>標簽放在已經居中的<div>內。 這樣，您就可以將<img>標簽放置在絕對的位置，從而使圖像堆疊在一起。

“絕對位置元素相對於具有非靜態位置的第一個父元素定位。” -W3Schools 。 意味着您絕對定位的<img>標簽將相對於容器<div>放置。

更新的HTML：

<div class = "container">    
    <img src="avatar/body_blue.png" class="body" id="body0"/>
    <img src="avatar/body_green.png" class="body" id="body1"/>
    <img src="avatar/body_grey.png" class="body" id="body2"/>
    <img src="avatar/body_orange.png" class="body" id="body3"/>
    <img src="avatar/body_purple.png" class="body" id="body4"/>
</div>

添加此CSS類：

.container{margin: 0px auto; width: 575px;}

Answer 4

好的，我只是檢查了CSS並進行了以下更改：

1. 刪除#avatar的寬度
2. 拆下position:absolute; 來自.body

這將使您擁有的大型蓬松動物居中。

Answer 5

您已使用以下樣式設置了DIV #avatar的樣式：

#avatar {
position: relative;
width: 300px;
height: 350px;

如果這是您要在頁面上居中放置的DIV，則將樣式更改為：

#avatar {
margin: 0 auto;
width: 300px;
height: 350px;