-2

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

7 回答 7

2

演示

现在定义您的#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>

演示

于 2012-11-05T11:18:42.990 回答
0

为此，您需要给出.center明确的宽度，否则浏览器无法计算左右边距。以下应该有效：

.centerer{
        margin : 0 auto;
   width:100px;
}
于 2012-11-05T11:19:28.000 回答
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;
}

演示

于 2012-11-05T11:19:43.707 回答
0

尝试给centererdiv 一个宽度。

于 2012-11-05T11:20:56.343 回答
0

.centerer 居中，它具有（width: auto默认值），因此与其容器一样宽，并且看起来与左对齐或右对齐一样。

如果要居中，#main则必须#main自行设置自动边距。

于 2012-11-05T11:24:29.613 回答
0

您希望#main 处于中心位置，因此您必须给予margin:0 auto;#main。

这是一个演示

的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;
    }
​
于 2012-11-05T12:09:14.490 回答
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>

或者，您可以摆脱.centererdiv，而只是#main通过应用相同的 CSS 使 div 自身居中 - 您已经定义了宽度，因此只需添加margin:0 auto;. 但是，如果您希望其他项目在.centerer容器内居中，请保持原样。

于 2012-11-05T19:34:49.197 回答