テキストを div の中央に配置し、同時に 3 つの div をコンテンツ領域内に収めようとしていますが、うまくいきません...
HTML
<div id="content">
<div class="latest">
<p>Gentlemen, these are my latest works</p>
</div>
<div id="works">
<div class="one">
<a href="myworks.html" class="title">Lineage 3 Online</a>
<div class="prev1"></div>
</div>
</div>
<div class="two">
<a href="myworks.html" class="title">Lineage 3 Online</a>
<div class="prev2"></div>
</div>
</div>
<div class="three">
<a href="myworks.html" class="title">Lineage 3 Online</a>
<div class="prev2"></div>
</div>
</div>
</div>
</div>
CSS
div#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.latest {
text-align: center;
font-family: "Open Sans", Helvetica, sans-serif;
color: #777;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
font-size: 18px;
padding-top: 25px;
padding-bottom: 5px;
border-bottom: 2px solid #DADADA;
}
div#works {
margin-top: 8px;
border-top: 2px solid #DADADA;
}
/*************************************/
div.one {
float: left;
width: 300px;
height: 300px;
margin-top: 10px;
border: 1px dotted #333;
}
div.two {
width: 300px;
height: 300px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px dotted #333;
}
div.three {
float: right;
width: 300px;
height: 300px;
margin-top: 300px;
border: 1px dotted #333;
}
a.title {
color: #333;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
line-height: 3;
border: 1px solid #000;
}
div.prev1 {
background-image: url(images/prev1.jpg);
width: 300px;
height: 200px;
border: 2px solid #FFF;
-moz-box-shadow: 0 0 1px #000;
-webkit-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
また、私は HTML5 と CSS にかなり慣れていないので、この質問がばかげているように聞こえたら申し訳ありません。