水平居中浮动框

我想显示一些浮动框（包含缩略图的div），缩略图的数量取决于当前页面的宽度。例如：水平居中浮动框

<div class="container"> 
    <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div> 
    .......... ETC 
</div>

的问题是，对于一个给定的宽度它显示例如每行4盒，但它们都是左对齐，并有一些白色的空间，以正确的，我怎么能水平为中心每一行？？

事情是这样的：http://realworldstyle.com/thumbs_3.html但箱子在页面上水平居中...

在此先感谢，

来源

2009-12-04 fidoboy

对不起，但无法做到你想用直接的CSS + HTML。（看看@Pekka的替代方案，但如果缩略图行不填满整行，他们会自己居中放在最后一行）

您需要在父对象.container与margin-left: auto和margin-right:auto，你不能这样做，因为它是一个流体宽度页面。

这是我怎么会去这样做，但它肯定有一些错误，你将需要解决：一个JavaScript事件

绑定到window.resize事件
获取新的文档宽度并查看一行中可以放置多少个缩略图
将div.container的宽度设置为该宽度加上右边的一点边距。这div总是有auto

这是一个margin-left和margin-right将围绕缩略图尽可能最佳。根据您的视觉显示器，您可能需要额外的包装div来提供100% width背景。

来源

2009-12-04 23:41:27

好吧，认为这可能是最简单的解决方案，我虽然我可以解决这只使用CSS，但似乎我也需要使用JavaScript也... ... – fidoboy 2009-12-04 23:51:22

可以downvoter花时间提供有用的反馈，所以我可以让我的回答更好？ – 2009-12-04 23:59:12

太棒了！我已经用jQuery的一些帮助解决了它，现在它可以工作...非常感谢dcneiner！ – fidoboy 2009-12-05 00:16:30

我想获得中心的元素的唯一方法是用浮动不行，但设置图像display: inline。这样，您可以使用父容器的text-align属性随意对齐它们。

但是，这会给你垂直边距和设置高度的问题。但据我所知，只要inline-block不被广泛支持，它是唯一可靠的跨浏览器方式。

来源

2009-12-04 23:34:47

我认为这个问题明确了为什么你的修复程序无法工作。 – 2009-12-04 23:36:12

采取点，读得太快。将编辑。 – 2009-12-04 23:37:45

我编辑了我的问题添加一个例子，以更好的理解... – fidoboy 2009-12-04 23:39:05

使用一个无序列表内联的列表元素：

HTML：

<ul> 
    <li><img src="image1.jpg" /></li> 
    <li><img src="image2.jpg" /></li> 
    <li><img src="image3.jpg" /></li> 
    <li><img src="image4.jpg" /></li> 
</ul>

CSS：

ul { 
    width: 960px; 
    text-align: center; 
} 

ul li { 
    display: inline; 
}

这就行了，只要你没有块级LI元素内的元素。如果你有多行图像，也可以工作;）你也可以使用div，但是使用列表在语义上更好。

来源

2009-12-04 23:42:02

这是行不通的，因为你在你的例子中使用了一个固定的（960px）.... – fidoboy 2009-12-04 23:52:15

@fidoboy他的例子工作时不需要宽度，但如果每行有6个项目，并且3在最后。最后3个将居中并且不符合前面的行。 – 2009-12-05 00:00:22

.container中的内联块和自动边距应该为大多数浏览器提供技巧，也许还有text-align：center on body。

如果IE6和IE7不能很好地发挥，你总是可以使用javascript/jquery将整个东西包装在一张表中。

你要知道，我不敢建议为正常的浏览器表的解决方案，但它显然是完美的作品;-)

来源

2009-12-05 00:14:27 jeroen

风格保证金：0汽车;将中心元素。但是你需要指定父容器的宽度。

<div style="width:100%; float:left; margin: 0 auto;"> 
    /* Your Child Elements */ 
</div>

来源

2013-11-14 06:07:03

水平居中浮动框

回答

相关问题