Question

我对我想要使用的布局有一个想法，但我无法让它正常工作。我希望这里有人可以提供帮助，因为我花了几个小时搜索。

布局是这样的。

一个包装div包含6个儿童div。无论包装div的大小如何，这些子div必须以 ALL 次为中心。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

问题是当浏览器调整得更小并且一个方框被敲到框下面的线上时会向左下方，而我希望它们始终居中。这可能是使用纯CSS还是我需要使用一些jquery？

Answer 1

最简单的解决方案可能是从框中删除float：left样式并将display属性更改为inline-block。然后你需要做的就是文本对齐：在包装器上居中。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>

您可以在此处测试代码： http://jsbin.com/uqamu4/edit

Answer 2

你可以在包装器中使用text-align: center，在框中使用display: inline-block，使它们的行为就像普通的文本元素一样，无论什么都是居中的。

警告：在IE6和IE 7中不起作用。在Chrome和FF中工作

JSFiddle here。

Answer 3

这不会在8或更少的情况下工作，不知道9，但由于你使用max-width和min-width不能在那里工作，我还是会发布它。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}

</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

Answer 4

对我有用的解决方案：

<style>
    body {
        /* To center the list */
        text-align: center;
    }

    #wrapper {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    .box {
        display: inline-block;
    }
</style>

液体布局中的多个居中浮动div

4 个答案: