Question

我有一个包含几个div的页面，有点像这样：

<div id="div_one">blah blah blah</div>
<div id="div_two">blah blah blah</div>

我希望它们水平居中，一个接一个地居中，第二个展开到页面的宽度。

Answer 1

.first_one
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.second_one
{
  width: 100%;
}

然后在你看来，你会做的第一个

<div class = "first_one">
...
</div>

对于第二个，你会做

<div class = "first_one second_one">
...
</div>

Answer 2

默认情况下，Div是其容器的整个宽度。

要使内容水平居中，请在其上设置“text-align: center;”。如果它们在容器中，也可以在容器上使用“margin: auto”，这将设置左右边距以自动居中div。

Answer 3

请记住，元素上有默认的边距，所以尽管它是100％但仍然存在一些差距。您可以使用一些CSS将边距重置为0。

Answer 4

body{ text-align: center; }

.first_one
{
  width: 600px; /* Can be any width */
  margin:0 auto;
}

/* Reset text-align for child content */
.first_one, .second_one{text-align: left}

为了在IE6中居中“first_one”，你需要在父元素上设置'text-align：center'。在这种情况下，我假设这是身体节点。此外，margin：0 auto不起作用，除非您指定宽度。

然后，您需要在子div上设置text-align left，以使其中的内容不居中。

您不需要在“second_one”上指定宽度，因为块元素会自然扩展以填充其父容器。此外，通过不设置宽度，浏览器将考虑您可以应用于“second_one”的任何填充，边距和边框，而不会破坏布局。

如何使用css将div扩展到页面的宽度？

4 个答案: