我正在处理图像网格,并希望创建类似于此http://instagram.com/instagram/的效果(页面底部边框扩大的正方形中的图像。这是我到目前为止的工作:

HTML:

<div id="page-title"> </div>

<div id="wrapper" style="min-height:300px;">
  <!--start: Container -->
    <div class="container" style="margin-left:100px;">

        <div style="position: absolute; width:200px; border: 1px solid black; height:200px;">
            <div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids">
        </div>

    </div>

    </div>

</div>
</div>​


CSS:

    .polaroids {
        background: #fff;
        float: left;
        width: 158px;
        height:158px;
        padding: 5px 5px 5px;
        text-align: center;
        text-decoration: none;
        color: #333;
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
        -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
        -webkit-transition: all .2s ease-in-out;
        border: 4px solid white;
         background-color: black;
   background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin:0 auto !important;
    }

    .polaroids:hover {
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
        -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
        z-index: 5; border-top: 10px solid white;
        border-bottom: 10px solid white;
        border-left: 8px solid white;
        border-right: 8px solid white;
    }​


中间div似乎不想居中。我要去哪里错了? http://jsfiddle.net/b5XDK/

最佳答案

对于水平居中,请在子元素上使用margin:0 auto;并删除float:left;

http://jsfiddle.net/roine/b5XDK/10/

关于html - 中心区扩大边界,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13796176/

10-12 12:22
查看更多