CSSで、画像を左寄せにして全体を中央にする方法
画像5点を左寄せで配置しています。
添付画像のようにブラウザの幅によって段数を変更できるようにしていますが、
どうしても、画像部分がセンタリングされません。
他のサイト等を丸2日かけて調べましたが、どうもうまい事できません。
どなたかご教授くださいませ。
よろしくお願いいたします。
以下、現状のHTMLとCSSです。
■HTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/style2.css" media="all">
<title>タイトル</title>
</head>
<body>
<header>
<p>ヘッダー</p>
</header>
<div id="contents">
<a href="http://○○○○○○○/001.html"><img src="images/001s.jpg" >
<a href="http://○○○○○○○/002.html"><img src="images/002s.jpg" >
<a href="http://○○○○○○○/003.html"><img src="images/003s.jpg" >
<a href="http://○○○○○○○/004.html"><img src="images/n004s.jpg" >
<a href="http://○○○○○○○/005.html"><img src="images/005s.jpg" >
</div>
<footer>
<p>フッター</p>
</footer>
</body>
</html>
■CSS
@charset "UTF-8";
*{ margin: 0;padding: 0}
a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : top}
html {
font-family : verdana, sans-serif;
font-size : 120%;
line-height : 150%;
margin : 0;
width : 100%;
text-align:center; }
body {
width:100%;
text-align:center; }
header {
width:100%;
margin-bottom: 0px;
color: #fff;
font-size: 20px;
height:30px;
background : url(../images/back.jpg) }
#contents {
width:100%;
padding : 30px 0 10px;
text-align:left; }
#contents img {
margin-bottom : 24px; }
footer {
color: #fff;
width:100%;
font-size: 10px;
height:30px;
background : url(../images/back.jpg) }
