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

Posted

技术标签:

【中文标题】液体布局中的多个居中浮动 div【英文标题】:Multiple centered floating divs in a liquid layout 【发布时间】:2011-04-24 05:24:21 【问题描述】:

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

布局是这样的。

一个包装 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?

【问题讨论】:

使用你的代码他们从来没有以我为中心? 【参考方案1】:

可能最简单的解决方案是从框中删除 float: left 样式并将显示属性更改为 inline-block。然后你需要做的就是 text-align: center 在包装器上。

<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

【讨论】:

嗨 Viktor,问题在于盒子没有包裹起来。我希望这个显示器可以在任何设备上工作。例如,普通笔记本电脑可能会并排显示 3 个盒子,但 iphone 只会显示一个在另一个之上。但是,如果有人更改视口以将一个框撞到下一行,它仍应将所有框居中 其实别理我。看起来它确实有效,但目前只能并排显示 2 个,我可以更改。干杯:)【参考方案2】:

您可以在包装器中使用text-align: center,在框上使用display: inline-block,使它们表现得像普通的文本元素,无论如何都居中。

警告:不适用于 IE6 和 IE 7。适用于 Chrome 和 FF

JSFiddle here.

【讨论】:

【参考方案3】:

这在 ie 8 或更少的版本中不起作用,不知道 9,但是由于您使用 max-widthmin-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>

【讨论】:

【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章

使多个浮动 div 彼此相邻居中

使用 CSS 将包含在 DIV 中的浮动输入元素居中

关于浮动与清除浮动

css中水平并列有三个div块元素,左边的div给了左浮动,可为啥左边哪个没有在最左?

CSS - 在浮动 div 中垂直居中图像

css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐