0

我正在处理图像网格，并希望创建类似于此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/ ​​​​</p>

4

3 回答 3

3

删除这个

.polaroids { float:left }
于 2012-12-10T07:02:25.110 回答
3

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

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

于 2012-12-10T06:55:55.123 回答
2

删除你float:left的 .polaroids

于 2012-12-10T06:59:07.917 回答