float:leftを使用して全体を中央寄せしたい
html勉強中のものです。
float:leftを使用したdivすべてbody全体の中央寄せにしたいです。
下記のソースから教えて下さい。
html
--------------
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="shift_jis">
<title>Director Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<hgroup>
<h1 id="header">Why not?</h1>
</hgroup>
<ul class="header">
<li>menu</li>
<li>info</li>
<li>list</li>
</ul>
</header>
<div class="float left">
<div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150">
</p>
<h1 class="float left">
Miyuki Yamanaka</h1>
<p class="float left">
Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p>
</div>
</body>
</html>
--------------
css
--------------
charset "utf-8";
/* ----------------------------------------------
This style definition is initiarize.
------------------------------------------------- */
body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td {
margin-right: 0 auto;
margin-left: 0 auto;
padding: 0 auto;
}
div.float left{
float:left;
}
div.cc {
width:200px;
background: #FAFAD2;
float:
border-style: none;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
overflow: hidden;
layout-grid-line:200px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 3px #000;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
--------------
よろしくお願いします！
お礼
この度は親切丁寧なご回答ありがとうございました。 おかげさまで、中央寄せが問題なくできました。 ご協力感謝します！