Css 液体布局中的多中心浮动div
我有一个布局的想法，我想使用，但我不能让它正常工作。我希望这里的人能帮上忙，因为我已经花了好几个小时搜索了 布局是这样的 一个包装器div包含6个子div。无论包装器div的大小如何，这些子div都必须在所有时间居中Css 液体布局中的多中心浮动div,css,css-float,html,centering,fluid-layout,Css,Css Float,Html,Centering,Fluid Layout,我有一个布局的想法，我想使用，但我不能让它正常工作。我希望这里的人能帮上忙，因为我已经花了好几个小时搜索了 布局是这样的 一个包装器div包含6个子div。无论包装器div的大小如何，这些子div都必须在所有时间居中 <html> <head> <title>Testing</title> <style> br.clear { clear:both; display:block; height:1px; margin:-1px 0 0
<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>
测试
br.clear{清除：两者；显示：块；高度：1px；边距：-1px 0；}
#包装{最大宽度：960px；最小宽度：320px；背景：#444；边距：0自动；}
.box{宽度：280px；填充：10px；边距：10px；高度：260px；边框：0px；浮点：左；背景：#fff；}
问题是，当浏览器的大小变小，一个框被敲到下面的线上时，框将向左点亮，而我希望它们始终居中。这可能是使用纯css还是需要使用jquery？最简单的解决方案可能是从框中删除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>
测试
br.clear{清除：两者；显示：块；高度：1px；边距：-1px 0；}
#包装{最大宽度：960px；最小宽度：320px；背景：#444；边距：0自动；文本对齐：中心}
.box{宽度：280px；填充：10px；边距：10px；高度：260px；边框：0px；背景：#fff；显示：内联块}
这在ie 8或更少版本中不起作用，我不知道9，但由于您使用的
最大宽度最小宽度<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>
测试
br.clear{清除：两者；显示：块；高度：1px；边距：-1px 0；}
#包装{最大宽度：960px；最小宽度：320px；背景：#444；边距：0自动；文本对齐：中心；}
.box{宽度：280px；填充：10px；边距：8px；高度：260px；边框：0px；背景：#fff；显示：内联块；}
文本对齐：居中显示：内联块jshiddle.对我有效的解决方案：
<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>
身体{
/*将列表居中*/
文本对齐：居中；
}
#包装纸{
/*将“文本对齐”重置为默认值*/
文本对齐：左对齐；
显示：内联；
}
.盒子{
显示：内联块；
}