Question

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

Answer 1

的 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

Answer 2

要使其工作，您需要给.center一个明确的宽度，否则浏览器无法计算左右边距。以下应该有效：

.centerer{
        margin : 0 auto;
   width:100px;
}

Answer 3

您可以通过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

Answer 4

尝试给centerer div一个宽度。

Answer 5

.centerer 以为中心，它具有width: auto（默认值），因此与其容器一样宽，看起来就像是左或右一样-aligned。

如果您想要居中#main，则必须在#main本身设置自动边距。

Answer 6

您希望#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;
    }

Answer 7

使用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;容器中心，请保持原样。

如何用CSS居中div？

7 个答案: