特にウィンドウのサイズを変更する場合(->レスポンシブデザイン)、画面の中央にいくつかの親指を表示する方法を見つけるのに苦労しています。
次の行にいくつかの画像が表示されますが、中央に表示されます...これはまったく驚くことではありません...しかし、中央の効果を得るにはどうすればよいですか(画像を常に中央に表示することに関して)最後の画像は左にフロートするため、上記の行で同じように始まりますか?)
これまでの私の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;
}
どうもありがとう!