水平和垂直居中和浮动 div 的 CSS/XHTML 问题答案

【问题标题】：CSS/XHTML problem with horizontally and vertically centered and floated div水平和垂直居中和浮动 div 的 CSS/XHTML 问题
【发布时间】：2011-10-15 23:34:51
【问题描述】：

浮动 div 有问题。这是我的网站：http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6

我不知道为什么有些行有 4 张图片，而另一些只有一张。

这是负责它的代码：

#gallery-images {margin:0 0 50px 0; display: table}
div.image-item {
    float:left; display: table; text-align: center; position: relative;
    width:180px; height: 150px;
    margin:10px 0 30px 40px;
    vertical-align: middle; text-align: center;
}

div.image-item a {display: table-cell; vertical-align: middle;}
div.image-item img {margin:auto; border:1px solid #d3d4d4;}


#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;}
div.photo-item  {margin: 0 auto; width:850px; display: block; text-align: center;}
div.photo-item a.img {margin:0 auto;  text-align: center; }

【问题讨论】：

我建议删除display: table;，这可能是问题所在。另外，vertical-align 实际为您做了多少，可以删除吗？

标签： css xhtml css-float centering

【解决方案1】：

试试display:inline-block;。

div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }

【讨论】：

我在“image-item”类中增加了一个高度值，效果很好。感谢这么快的回复:)

【解决方案2】：

将div.image-item 上的显示更改为inline-block，我将修改为使图像中心位于该 div 中。

【讨论】：

【解决方案3】：

当你留下这样的浮动元素时，一旦它们不再适合一行，下一个浮动元素将只下降到必要的位置，直到它适合为止。

例如，第 5 张图片“卡”在第 3 张图片的底部，而不是一直移动到左边缘，因为第 4 张图片没有那么高。

对于第 10 张图像，这不会发生，因为第 9 张图像高于它剩下的所有其他图像，所以一旦第 10 张图像下降到第 9 张图像的边缘以下，它就会清除整行.

如果您通过填充替换边距并向.image-item 添加边框，您会更清楚地了解我的意思。

要强制每行的第一项到下一行的开头，您不应该使用浮动，将每行 4 个项目包装在一个包含的 div 中，或者使用 CSS3 的神奇力量来清除浮动每行的开头：

.image-item:nth-child(4n+1) { clear:left }

【讨论】：