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;
}

You can view it live here

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并提出了以下更改：

从#avatar
从position:absolute;

.body

这将使你拥有的大蓬松动物居中。

Answer 5

您已使用以下内容为DIV #avatar设置样式：

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

如果这是你想要在页面上居中的DIV，那么将样式更改为：

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

Img以z-index为中心

5 个答案: