Question

我正在处理一个图像网格，想要创建一个与此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/

Answer 1

用于子元素的水平中心margin:0 auto;并删除float:left;

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

Answer 2

删除此

.polaroids { float:left }

Answer 3

删除你的float:left .polaroids

中心区扩展边界

3 个答案: