html - 带有 z-index 的图像中心

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>已经居中的 a 中。通过这种方式，您可以保持<img>标签的绝对位置，从而使您的图像保持堆叠在一起。

“绝对位置元素相对于第一个具有非静态位置的父元素定位。” - W3学校。这意味着您的绝对定位<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;