Html div不是'；t居中，一个div是一个div不是_Html_Css

Html div不是'；t居中，一个div是一个div不是

html css

Html div不是'；t居中，一个div是一个div不是,html,css,Html,Css,演示页面：在上面，包含“Ask any question&get”的div居中，但包含“answers 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

演示页面：

在上面，包含“Ask any question&get”的div居中，但包含“answers 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>


无标题文件
div{
保证金：0；
填充：0；
}
#边栏{
高度：600px；
宽度：200px；
}
#上部组块{
高度：108px；
背景图片：url（Untitled-3.jpg）；
背景重复：重复-x；
文本对齐：居中；
位置：相对位置；
}
.下来{
底部：3px；
位置：绝对位置；
保证金：自动；
宽度：200px；
}
#底部{
背景图片：url（Untitled-4.jpg）；
身高：492px；
位置：相对位置；
}
#包装器#侧栏#上部组块{
颜色：#FFF；
字号：0.9em；
字体大小：粗体；
}
德里先生{
字号：1.8em；
}
.顶{
顶部：3px；
位置：绝对位置；
左边距：自动；
右边距：自动；
宽度：100px；
}

德里问答。
问任何问题都可以
回答

有人想指出我在这里遗漏了什么吗

当元素添加了

位置：绝对

时，不能通过

边距：0自动

将其居中。从

.top

中删除

位置：绝对

，它应该可以工作

不确定你想要达到什么，但这基本上解决了你的问题。请记住，您可以使用填充来“居中”内容。这将使您无需显式设置宽度。

当添加了

位置：绝对时，您不能通过边距：0 auto
将元素居中。从.top
中删除位置：绝对
，它应该可以工作
不确定你想要达到什么，但这基本上解决了你的问题。请记住，您可以使用填充来“居中”内容。这将使您不必显式地设置宽度。
正如kuroir的回答所说，如果同时使用绝对定位，则无法以这种方式居中元素
您的“ask any question”div没有居中，您为它指定了与其容器相同的宽度
两者看起来不同的唯一原因是，在#上部
容器上有一个文本对齐：居中，而不是在#底部
容器上。
正如kuroir的回答所说，如果同时使用绝对定位，则无法以这种方式居中元素
您的“ask any question”div没有居中，您为它指定了与其容器相同的宽度
两者看起来不同的唯一原因是在#topside
容器上有一个文本对齐：居中，而不是在#bottomside
容器上。
您需要更改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%;
}

更改是不言自明的，如果有混淆，请告诉我。
您需要更改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%;
}

这些更改是不言自明的，如果有混淆，请告诉我。
在旁注中，您可以对css进行适当优化，删除实际上不需要的项目/样式，但这是您可以稍后查看的内容！）另一方面，您可以稍微优化css，删除实际上不需要的项目/样式，但这是您以后可以研究的内容！）谢谢大家，文本对齐中心做到了。此外，现在似乎很明显，保证金：0自动；不会将绝对div居中…谢谢大家，文本对齐中心做到了。此外，现在似乎很明显，保证金：0自动；不会以绝对div为中心。。