画像をセンター配置にする方法
過去ログを検索したのですが、同じような方法が載っていなくて質問させていただきます。
以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。
根本的な部分の理解ができていないかもしれませんが、どうかご教授お願いします。
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--▼▼ヘッダーここから▼▼-->
<div id="header">
<p>ヘッダー</p>
</div>
<!--▲▲ヘッダーここまで▲▲-->
<!--▼▼メインここから▼▼-->
<div id="main">
<ul>
<div id="main_site01">
<p class="center">aaa01</p><li><img src="images/site01.jpg" width="300" height="200" alt="01" /></li><p class="center">aaa01</p>
</div>
<div id="main_site02">
<p class="center">aaa02</p><li><img src="images/site02.jpg" width="300" height="200" alt="02" /></li><p class="center">aaa01</p>
</div>
<div id="main_site03">
<p class="center">aaa03</p><li><img src="images/site03.jpg" width="300" height="200" alt="03" /></li><p class="center">aaa01</p>
</div>
</ul>
</div>
<!--▲▲メインここまで▲▲-->
<!--▼▼フッターここから▼▼-->
<div id="footer">
<p>フッター</p>
</div>
<!--▲▲フッターここまで-▲▲-->
</body>
</html>
【HTMLここまで】
--------------------------------------------------------------------------------
【CSS】
@charset "utf-8";
/*******************/
/* リセットcss */
/*******************/
* {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 1.6;
font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3";
}
img {
border: none;
}
/*******************/
/* コンテンツ */
/*******************/
body {
background-color: #000;
}
#header {
height: 100px;
margin-top: 50px;
font-size: 18px;
background-color: #fff;
}
#main {
color: #FFF;
width: 990px;
text-align: center;
}
#main ul li {
float: left;
margin: 0 15px 15px;
}
#main_site01 {
float: left;
}
#main_site02 {
float: left;
}
#main_site03 {
float: left;
}
.center {
text-align: center;
margin-top: 15px;
}
#main ul {
text-align: center;
}
#footer {
height: 100px;
font-size: 18px;
color: #000;
clear: both;
background-color: #fff;
}
【CSSここまで】
お礼
センターにしたいコンテンツの中にある各コンテンツに position:relative; を追加したら出来ました。 皆様のアドバイスのおかげです。 どうもありがとうございました。
補足
ありがとうございます。 それでも駄目でした… 無理なのかも知れません。