我正在学习HTML / CSS,到目前为止,我仍然遇到CSS困难,特别是在定位方面。
例如,有人可以向我解释为什么以下不起作用吗?
<!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" />
<style type="text/css">
#main{
background-color : blue;
height : 50px;
width : 30px;
}
.centerer{
margin : 0 auto;}
</style>
</head>
<body>
<div class="centerer">
<div id="main">
</div>
</div>
</body>
</html>
答案 0 :(得分:2)
的 Demo 强> 的
现在定义您的#main
ID display:inline-block
并在text-align:center
类
.centerer
>
写这样做
<强>的CSS 强>
#main {
background-color: blue;
height: 50px;
width: 30px;
display:inline-block;
vertical-align:top;
}
.centerer{
margin : 0 auto;
width:200px;
background:red;
text-align:center;
}
您的HTML
<div class="centerer">
<div id="main">fgasdfds fsd ds fsd
</div>
</div>
答案 1 :(得分:0)
要使其工作,您需要给.center
一个明确的宽度,否则浏览器无法计算左右边距。以下应该有效:
.centerer{
margin : 0 auto;
width:100px;
}
答案 2 :(得分:0)
您可以通过margin:auto;
<强> HTML 强>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="main">afdafdaf
</div>
</body>
</html>
<强> CSS 强>
#main {
margin:auto;
width:500px;
height:100px;
background:red;
text-align:center;
}
答案 3 :(得分:0)
尝试给centerer
div一个宽度。
答案 4 :(得分:0)
.centerer
以为中心,它具有width: auto
(默认值),因此与其容器一样宽,看起来就像是左或右一样-aligned。
如果您想要居中#main
,则必须在#main
本身设置自动边距。
答案 5 :(得分:0)
您希望#main位于中心,因此您必须将margin:0 auto;
提供给#main。
这是demo
HTML:
<div class="centerer">
<div id="main"></div>
</div>
CSS:
.centerer {background-color : red;}
#main {
background-color : blue;
height : 50px;
width : 30px;
margin : 0 auto;
}
答案 6 :(得分:0)
使用margin:0 auto
会使DIV居中,但您必须提供宽度才能使其正常工作。
例如,在CSS中:
div {
width: 900px;
margin:0 auto;
}
这是您更新的HTML / CSS代码,以便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" />
<style type="text/css">
#main {
background-color: blue;
height : 50px;
width : 30px;
}
.centerer {
margin : 0 auto;
width: 30px;
}
</style>
</head>
<body>
<div class="centerer">
<div id="main">
</div>
</div>
</body>
</html>
或者,你可以摆脱.centerer
div,而只是让#main
div居中,通过应用相同的CSS - 你已经定义了宽度,所以只需添加{{ 1}}。但是,如果您希望其他项目位于margin:0 auto;
容器中心,请保持原样。