Question

在上面，包含“Ask any＆amp; get”的div居中，但是包含“answer on”行的div不是。为什么？两者的风格相似。给定宽度，绝对位置，自动余量。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
    margin:0 ;
    padding:0 ;
}
#sidebar {
    height: 600px;
    width: 200px;
}

#topside {
    height: 108px;
    background-image: url(Untitled-3.jpg);
    background-repeat: repeat-x;
    text-align: center;
    position: relative;
}
.down {
    bottom: 3px;
    position: absolute;
    margin: auto;
    width: 200px;

}
#bottomside {
    background-image: url(Untitled-4.jpg);
    height: 492px;
    position: relative;
}
#wrapper #sidebar #topside {
    color: #FFF;
    font-size: 0.9em;
    font-weight: bold;
}
.delhi {
    font-size: 1.8em;
}
.top {
    top: 3px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100px;

}
</style>
</head>

<body>
<div id="wrapper">
    <div id="sidebar">
      <div id="topside"><br /> <span class="delhi">Delhi </span> Questions and answers.
     <div class="down">
    Ask any question & get  
    </div>
      </div>
      <div id="bottomside">
      <div class="top"> answers on </div>
      </div>
    </div>

</div>
</body>
</html>

有人想指出我在这里缺少什么吗？

Answer 1

如果元素添加margin:0 auto，则无法通过position:absolute将元素居中。从position:absolute移除.top，它应该有效。

不确定您要实现的目标，但这几乎解决了您遇到的问题。请记住，您可以使用填充来“居中”内容。这将使您不必明确设置宽度。

Answer 2

正如kuroir的回答所说，如果你也使用绝对定位，你不能以这种方式集中元素。

你的“问任何问题”div 不是居中，你给它的宽度和它的容器相同。

两者看起来不同的唯一原因是text-align: center容器上有#topside，而#bottomside容器上没有。{/ p>

Answer 3

您需要更改CSS，更新“#bottomside”和“.top”样式，如下所示：

#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
text-align: center;
}

.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}

这些变化是不言自明的，如果有混淆，请告诉我。

div不是居中，一个div是一个div不是

3 个答案: