从外部 div 中删除/忽略浮动答案

【问题标题】：remove/ignore float from outer div从外部 div 中删除/忽略浮动
【发布时间】：2011-01-29 18:13:31
【问题描述】：

这听起来可能很奇怪，但我有一些 css 可以对齐我的 div。在一个地方，我还使用http://www.brunildo.org/test/img_center.html 将图像居中。

现在我希望我的 div 在一个更大的 div 中，如果这一行已满，则转到另一行。浮动：左似乎是答案。问题是它破坏了我的格式。包括上述链接中的解决方案。我有这个测试代码。如果我删除宽度并浮动它看起来很好，但它可能会占用太多空间并且不会转到另一行。

我在想我可以在外层上使用浮点数并将图像居中。但是 float: left 仍然在破坏它。我希望有一种方法可以删除浮动，因此每个 div 确实会向左移动，但内部的 div 正确居中不会破坏我的格式。

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background: blue;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

<div class="c">
<div>

<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>

</div></div></div>

【问题讨论】：

标签： css alignment html vertical-alignment

【解决方案1】：

常规的旧display:inline 可用于图像本身（或容器 div）。这将使项目根据封闭 div 的宽度流动到多行。

为了使* div 居中，应该使用 margin: 0 auto 之类的方法（如果父级有宽度），如果没有，则使用旧的 <center> 标签。

【讨论】：