Question

我试图将宽度为1000像素的div居中，然后在所述div内对齐一段距离左边10px的文本，并将图像直接对齐在中间，但我遇到了麻烦。文本被推离屏幕左侧，图像位于屏幕左侧。

我不明白我在这里做错了什么。我确信解决方案令人难以置信，而且我只是很厚。

<!DOCTYPE html>
<html>
<head>
<style>

body {
margin: 0;
padding: 0;
background-color:red;
}

div#headerinner {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
}

img.header {
position:absolute;
display: block;
margin-left: auto;
margin-right: auto;
}

span#login {
position: absolute;
left: 10px;
}

</style>
</head>
<body>
<div id="headerinner">
<span id="login">Welcome!</span>

<img class="header" src="mysite/heading.png" alt="Header">

</div>

</body>
</html>

Answer 1

如果你设置位置：绝对你不能设置margin-left：auto;和保证金权利：auto;对于那个元素。所以

img.header {
  display: block;
  margin-left: auto;
  margin-right: auto;
           }

Answer 2

只需从此position:absolute class

中删除img.header即可

img.header {
    /*position:absolute;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

fiddle

将div中的两个块对齐，这个块本身对齐

2 个答案: