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

Question

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

布局就是这样。

一个包装div包含6个儿童div。 这些孩子的div必须在任何时候为中心，无论包装div的大小。

<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 在这里。

Answer 3

对我有用的解决方案：

<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>

Answer 4

这不会工作在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>

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

问题描述

4 个解决方案

解决方案1
6 已采纳 2010-10-12 10:03:58

解决方案2
3 2010-10-12 10:05:45

解决方案3
0 2014-07-13 18:50:49

解决方案4
0 2010-10-12 10:05:02

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

问题描述

4 个解决方案

解决方案1 6 已采纳 2010-10-12 10:03:58

解决方案2 3 2010-10-12 10:05:45

解决方案3 0 2014-07-13 18:50:49

解决方案4 0 2010-10-12 10:05:02

解决方案1
6 已采纳 2010-10-12 10:03:58

解决方案2
3 2010-10-12 10:05:45

解决方案3
0 2014-07-13 18:50:49

解决方案4
0 2010-10-12 10:05:02