Question

我有一个我想要居中的页面，背景和整个内容的边框。

我制作了一个div并使用我想要的背景颜色和边框设置进行设置。

问题是它内部的div有浮动而背景不会在浮动div周围伸展。我能够让它工作的唯一方法是设置position：absolute。然后边界确实在浮动div周围扩展，但我无法使用常规html / css将它们居中。

我找到了一个javascript hack来使它成为中心，但它只在页面加载后居中并且看起来很糟糕。

我确信有一种方法可以让容器扩展并使其居中，我只是想不出来。

这是一个分享我的问题的示例html页面

<div style="background-color: Red; width: 980px; position: absolute;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
</div>

这里是让它工作的Javascript（使用Jquery）

$(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        $("#container").css('left', winW / 2 - $("#container").width() / 2);
    });

必须有更好的方法。

由于

Answer 1

使用auto作为左右margin使元素居中。

在浮动元素后放置一个元素，并使用clear将其放在它们下面。由于它不是浮动的，它会影响外部div的大小。

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>

Answer 2

这是一个棘手的问题，但我在样式表中使用了以下代码;

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

然后在体内;

<div class="sentor">
<div class="child">
    <div id="mycontent">

这应该可以解决问题

Answer 3

也许我不能很好地理解你的问题，但我认为你正在寻找类似的东西。这是我们简单的布局：

<html>
    <head>
        ...
    </head>

    <body>

        <div id="center">
            <!-- your content -->
        </div>

    </body>

</html>

要让div＃center的内容移动到页面的中心，我们需要以下CSS：

body {
    text-align: center;
}

div#center {
    text-align: left;
    width: 600px;    // Or some other arbitrary width
    margin: 0 auto;
}

这将使身体内的一切都集中在一起。但是，text-align：center;属性也将适用于身体的孩子，所以我们用第二个样式规则取消了。或者，您可以使用以下样式规则代替div＃center：

body * {
    text-align: left;
}

Answer 4

使用：

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

保证金：0自动;将红色div居中。

溢出：隐藏;将使红色div拉伸包含两个浮动div。

如何使div居中并使其在div内部扩展？

4 个答案: