如何用CSS居中div?

时间:2012-11-05 11:16:59

标签: css center centering

我正在学习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>

7 个答案:

答案 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>

Demo

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

Demo

答案 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;容器中心,请保持原样。