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

I have a page that I want centered, with a background and a border around the entire content.

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

I made a div and set it with the background color and the border settings I want.

我做了一个div并用背景颜色和我想要的边框设置来设置它。

Problem is that it has divs inside it that float and the background does not stretch around the floating divs. The only way I was able to get it to work was by setting position:absolute. Then the border did expand around the floating divs but I was unable to center them using regular html/css.

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

I found a javascript hack to make it center but it only centers after the page loads and it looks bad.

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

I am sure there is a way to have the container expand and still have it centered, I just can't figure it out.

我确信有一种方法可以让容器扩展并且仍然让它居中,我只是想不通。

here is a sample html page that shares my problems

这是一个示例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>

and here is the Javascript that makes it work (uses Jquery)

这里是让它工作的Javascript(使用Jquery)

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

There has got to be a better way.

必须有一个更好的方法。

Thanks

4 个解决方案

#1

Use auto as left and right margin to center the element.

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

Put an element after the floating elements and use clear to put it below them. As it's not floating, it will affect the size of the outer div.

在浮动元素后放置一个元素,并使用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>

#2

this is a tricky one, but I use the following code in stylesheets;

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

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

then in the body;

然后在体内;

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

this should do the trick

这应该可以解决问题

#3

Use:

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

The margin: 0 auto; will center the red div.

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

The overflow: hidden; will make the red div stretch to contain the two floating divs.

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

#4

Maybe I'm not understanding your question well enough, but I think you're looking for something similar to this. Here's our simple layout:

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

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

    <body>

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

    </body>

</html>

To get the contents of div#center to move to the center of the page, we need the following CSS:

要使div#center的内容移动到页面的中心,我们需要以下CSS:

body {
    text-align: center;
}

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

This will center everything within body. However, the text-align: center; property will also be applied to the children of body, so we cancel that out with the second style rule. Alternatively, in place of div#center, you could use the following style rule:

这将把所有内容集中在体内。但是,text-align:center;属性也将适用于身体的孩子,所以我们用第二个样式规则取消了。或者,您可以使用以下样式规则代替div#center:

body * {
    text-align: left;
}

#1