0

特にウィンドウのサイズを変更する場合（->レスポンシブデザイン）、画面の中央にいくつかの親指を表示する方法を見つけるのに苦労しています。

次の行にいくつかの画像が表示されますが、中央に表示されます...これはまったく驚くことではありません...しかし、中央の効果を得るにはどうすればよいですか(画像を常に中央に表示することに関して)最後の画像は左にフロートするため、上記の行で同じように始まりますか?)ここに画像の説明を入力

これまでの私のHTMLコードは次のようになります(彼のフィドルも参照してください: http://jsfiddle.net/Zw9Ug/ )

<!doctype html>  
<html lang="de">  
    <head>  
        <meta charset="utf-8">  
        <title>Template Gallery </title>  
        <meta name="description" content="This is the content">  
    </head>  
    <body>
        <div id="wrapper">
            <div id="inner">
                <div id ="gallery_container">
                    <!-- // TODO - hurry -->
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />

                </div>
            </div>
        </div>

    </body>  
</html>

CSS:

#wrapper{
    margin:0px auto;
    width:90%;
    text-align: center;
}
#inner{
    margin-left: auto;
    margin-right: auto;

}
#gallery_container{
    width:auto;
    float:left;
}
#gallery_container img{
    min-height:90px;
    max-height:170px;
}
body {
    background-color: grey;
}

どうもありがとう！

4

1 に答える 1

1

実際のニーズに応じて、次のいずれかを追加できます。

#gallery_container img{
   float: left;
}

ただし、境界線と最も外側の左/最も右の画像の間のスペースは同じではありません。

または、その効果を実現したい場合は、次を追加できます。

#wrapper{
    text-align: justify;
}

しかし、画像間の間隔は正確には同じではありません。

于 2012-06-29T15:10:58.543 に答える