我似乎无法弄清楚如何对齐其中的一些 div(主要是居中)。我希望页面看起来尽可能接近这张图片:
http://s7.postimg.org/saf158dqj/Test_Img.jpg
即 1)我希望标题中的文本垂直居中(我想将它放在一个单独的 div 中，背景色为黑色)； 2)我希望 body 内的独立正方形，彩色div在屏幕上等距并居中(最好相对于屏幕尺寸)； 3) 我希望页脚(hr 和文本)跨越黑色 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>
最佳答案
对于每个 <div>在 CSS 中，使用:
margin-left: auto;
margin-right: auto;
关于css - HTML 分区对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20204333/