Question

我使用以下代码显示图像列表并对每个图像应用阴影效果。图像的方向可能不同，但总是最多120px。

为了让这个工作，我不得不浮动：离开“阴影”容器。通过调整容器的边距及其图像，我可以模拟阴影。（http://img200.imageshack.us/i/withfloat.png/）

这种方法的缺点是图像然后变得左对齐。如果我移除浮动，则.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

删除浮动，但将overflow:auto添加到包含元素。这将使非浮动元素以您期望的方式包含其内部浮动元素。

CSS包装图像或“中心浮动”

1 个答案: