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

margin:0 auto;子要素の水平方向の中央で使用する場合は、float:left;

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

于 2012-12-10T06:55:55.123 に答える
3

これを取り除く

.polaroids { float:left }
于 2012-12-10T07:02:25.110 に答える
2

float:leftポラロイドのあなたを削除します

于 2012-12-10T06:59:07.917 に答える