我似乎無法弄清楚如何對齊這些div的幾個(主要是居中)。我希望頁面看起來基本接近這一形象地:HTML Div Alignment
http://s7.postimg.org/saf158dqj/Test_Img.jpg
即 1)我想在標題中的文本垂直居中(我想將其放在一個單獨div與bg顏色黑色); 2)我想要分開的正方形,身體內的彩色divs在屏幕上等距並居中(最好相對於屏幕大小); 3)我希望頁腳(小時和文本)跨越黑色div邊緣的整個底部(左側版權浮動,右側接觸浮動),儘管當前代碼將它壓扁到左側。
這裏是我現在的代碼(對不起長度):並提前感謝您的幫助!
<html>
/* Styles for All Pages */
html {
height: 100%;
}
body {
/* Sizing Properties */
height: 100%;
margin:0;
padding:0;
background-color: white;
color: white;
}
header, footer, nav {
display: block;
}
#innerBodyDiv {
height: 100%;
margin: 0% 10% 0% 10%; /*Leaves space on left and right to show background */
background-color: black;
}
/* Styles for Header & Footer */
/* Header */
#header {
height: 10%;
width: auto;
background-color: teal;
}
#header a ,a:hover, a:visited{
color:white;
text-decoration: none;
}
#divInHeader {
text-align: center;
font-family: Microsoft PhagsPa;
}
/* Home Page Nav Divs Properties */
#divOuterHomePageNav {
}
divInnerHomePageNav {
}
.squaresBox {
height: 100px;
width: 100px;
text-align: center;
}
.squaresText {
text-align: center;
color: black;
text-decoration: none;
}
.leftFloat {
float: left;
}
.clear {
clear: both;
}
/* Header & Footer Styles */
#footer {
position:absolute;
bottom:0;
color: white;
padding: 5px 10px 10px 10px;
}
#copyright {
float:left;
}
#contact {
float:right;
}
#footer a{
color: teal;
text-decoration:none;
}
#footer a:hover, a:visited:hover{
color: white;
}
#footerText {
padding: 0px 10px 0px 10px;
}
/* HomePage Nav and Multi-Page Nav Colors */
.colorWebDesign {
background-color: #0b8140;
}
.colorGraphicDesign {
background-color: #35459c;
}
.colorPhotography {
background-color: #4d2a7c;
}
.colorVideo {
background-color: #e9292a;
}
.colorAudio {
background-color: #faa41a;
}
.colorWriting {
background-color: #FFD801;
}
</STYLE>
<div id="innerBodyDiv">
<!-- Header -->
<header id="header">
<a href="index.html">
<div id="divInHeader">
<h1>My Name</h1>
</div>
</a>
</header>
<!-- Home Page Nav -->
<div id="divOuterHomePageNav">
<div id="divInnerHomePageNav">
<a href="webdesign.html">
<div class="squaresBox leftFloat colorWebDesign">
<span class="squaresText">Web <br> Design</span>
</div>
</a>
<a href="graphicdesign.html" >
<div class="squaresBox leftFloat colorGraphicDesign">
<span class="squaresText">Graphic <br> Design</span>
</div>
</a>
<div class="squaresBox leftFloat colorPhotography">
<span class="squaresText">Photography</span>
</div>
<div class="clear"></div>
<a href="video.html" >
<div class="squaresBox leftFloat colorVideo">
<span class="squaresText">Video</span>
</div>
</a>
<a href="audio.html" >
<div class="squaresBox leftFloat colorAudio">
<span class="squaresText">Audio</span>
</div>
</a>
<a href="writing.html" >
<div class="squaresBox leftFloat colorWriting">
<span class="squaresText">Creative <br> Writing</span>
</div>
</a>
<div class="clear"></div>
</div>
</div>
<br>
<footer id="footer">
<hr>
<div id="footerText">
<span id="copyright">© Copyright</span>
<a href="contact.html" id="contact">Contact</a>
</div>
</footer>
</div>
這應該適當地居中元素 – Omicron