这听起来可能很奇怪,但我有一些 css 可以对齐我的 div。在一个地方我也使用 http://www.brunildo.org/test/img_center.html以图像为中心。
现在我希望我的 div 在一个更大的 div 中转到另一行,如果这一行已满。 float: left 似乎是答案。问题是它破坏了我的格式。在上面的链接中包括解决方案。我有这个测试代码。如果我删除宽度并 float 它看起来不错,但它可能占用太多空间并且不会转到另一行。
我在想我可以在 outerdiv 上使用 float 并将图像居中。然而 float: left 仍然打破它。我希望有一种方法可以删除 float ,这样每个 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>
最佳答案
常规旧display:inline
可用于图像本身(或容器 div)。这将使元素根据封闭的 div 的宽度流到多行。
使顶级 div 居中,类似于 margin: 0 auto
应该这样做(如果 parent 有宽度)或旧的 <center>
如果没有,请标记。
关于css - 从外部 div 中删除/忽略 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2482432/