HTML Div Alignment

我似乎無法弄清楚如何對齊這些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">&copy; Copyright</span> 
      <a href="contact.html" id="contact">Contact</a> 
     </div> 
    </footer> 

</div>

來源

2013-11-25 UserEK

對於在CSS每個<div>，使用方法：

margin-left: auto; 
margin-right: auto;

來源

2013-11-25 22:06:47 Omicron

這應該適當地居中元素 – Omicron

我有之前做這樣的事情，有你的CSS頁面試圖

text-align: center;

？

來源

2013-11-26 22:05:00 Domin8or

HTML Div Alignment

回答

相關問題