0

フォトアルバムを制作しています。小さいウィンドウでウェブサイトを表示しているときに問題が発生しました。写真が右側に収まらず、そこに大きなギャップが残っています。

<div id="gallery">
    <a href="#">
        <img src="images/1.jpg" />
    </a>
    <a href="#">
        <img src="images/2.jpg" />
    </a>
    <a href="#">
        <img src="images/3.jpg" />
    </a>
    <a href="#">
        <img src="images/4.jpg" />
    </a>
    ....
</div>
* { margin: 0; padding: 0;}

body {
    background: #000;
}

#gallery {
    width: 100%;
    margin: 25px auto;
    padding:0 12.5px;
}

#gallery a {
    display: block;
    float: left;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
    background: #FFF;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

}
#gallery a img {
    height:150px;
    width:225px;
    display:none;
}

あなたはここで動作するバージョンを見ることができます：http：//codepen.io/Dirkandries/full/hLxft

すべての画像を常に中央に揃えるにはどうすればよいですか？

私はすでに試しmargin: 0 auto;ましたが、うまくいかないようです

4

1 に答える 1

1

display:inline-blockリンクを左に浮かせる代わりにリンクで使用しtext-align:centerてから、ギャラリーラッパーで使用します。

http://codepen.io/anon/pen/jIfLh

#gallery {
    width: 100%;
    margin: 25px auto;
    padding:0 12.5px;
    text-align:center;
}

#gallery a {
    display: inline-block;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
    background: #FFF;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
于 2013-01-10T17:26:06.220 に答える