CSS 换行图像或 "center float"

Question

我正在使用以下代码显示图像列表并对每个图像应用投影效果。图片的方向可能会有所不同，但始终最大为 120 像素。

为了让它工作，我必须 float :离开“影子”容器。通过调整容器的边距及其图像，我能够模拟投影。 ( http://img200.imageshack.us/i/withfloat.png/ )

这种方法的缺点是图像会变为左对齐。如果我删除 float .shadow 背景跨越 li 的整个宽度并且不包裹图像。 (见上面的网址，但“withoutfloat.png”)

如何让阴影 div 包裹图像并使其在 li 中居中？

CSS:

<style type="text/css">
    ul
    {
        list-style-type: none;
        position: relative;
        margin: 0;
        padding: 0;
    }
    li.box
    {
        display: inline;
        float: left;
        margin: 3px; 
        background: red;
        position: relative;
    }
    .wraptocenter
    {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 120px;
        height: 120px;
    }
    .wraptocenter *
    {
        vertical-align: middle;
    }
    .shadow
    {
        background: blue;
        margin: 10px 0 0 10px !important;
        margin: 10px 0 0 5px; 

    }
    .shadow img
    {
        margin: -4px 6px 6px -4px;
    }
</style>

HTML:

<ul>
    <li class="box">
        <div class="wraptocenter">
            <span>
                <div class="shadow">
                    <img src="Handler.ashx?id=936&size=103" />
                </div>
            </span>
        </div>
    </li>
</ul>

Answer 1

移除 float 但将 overflow:auto 添加到包含元素。这将使非 float 元素按照您期望的方式包含其内部 float 元素。