居中頁腳網頁

-1

我正在建設一個網站，我有一個包裝類來修復一些元素到網頁中心。但是，頁腳菜單不會發生，另一方面，我可以使用徽標和一些文字來完成。我有這樣的代碼：here is the fiddle 居中頁腳網頁

<div id="footer"> 
    <div id="footer_menu" class="wrap"> 
     <div id="fst_column" class="divider footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
     <div id="sec_column" class="divider menu footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
     <div id="trd_column" class="divider menu footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
     <div id="frth_column" class="divider menu footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
     <div id="fvth_column" class="divider menu footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
    </div> 
    <img id="logo_small" src="images/logo_small.png"/> 
    <div id="copyright" class="wrap"> 
     Some Copyright text 
    </div>

CSS：

.wrap{ 
    width: 1000px; 
    margin: 0 auto; 
    clear:both; 
} 

ul.menu{ 
    list-style-type: none; 
    margin:0; 
    padding:0; 
} 

.divider{ 
    height:90px; 
    border-left:2px solid white; 
} 

#footer{ 
    width: 100%; 
    height:100px; 
    left:0px; 
} 

#footer_menu { 
    overflow: hidden; 
    float:left; 
    width:85%; 
    background-image: -webkit-linear-gradient(45deg, rgb(0,159,194), rgb(0,15,61)); /* Safari */ 
    background-image: -moz-linear-gradient(45deg, rgb(0,159,194), rgb(0,15,61)); /* Firefox */ 
} 

.footer_column{ 
    width: 175px; 
    padding-left:10px; 
    padding-top:10px; 
    font-size: 12px; 
    line-height: 15px; 
    font-family: "Quicksand"; 
    float:left; 
    color:#FFFFFF; 
} 

#frth_column, #fvth_column{ 
    color:rgb(142,216,248); 
}

版權文本正確行爲（也是在網頁頂部的標誌），但頁腳部分不。

我想我做的浮動部分錯了。我怎樣才能把頁腳部分也放在網頁的中心。

這五列應該是內聯的，並且徽標不在藍色區域。

在此先感謝。

編輯：新增佈局PRINTSCREEN Layout example

EDIT2：我多麼希望菜單 Desired menu

來源

2014-05-01 Andre Roque

圖像SRC是'圖像/ logo_small.png'，這指的是本地圖像到您的網站，我們無法看到它所以基本上我們不知道它會是什麼樣子。您應該將整個http鏈接放在那裏，以便我們可以準確地看到圖像的外觀。 –

問題不在圖像上，是在頁腳欄上。在我的預覽中，他們都在左邊，我希望他們居中。正如我所說， –

例子：http://jsfiddle.net/guinatal/WTE2v/8/

HTML

<div id="footer"> 
    <div id="footer_menu" class="wrap"> 
     <center> 
     <div id="fst_column" class="divider footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
     <div id="sec_column" class="divider menu footer_column"> 
      <ul class="menu"> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
       <li>SomeText</li> 
      </ul> 
     </div> 
     </center> 
    </div> 
    <img id="logo_small" src="images/logo_small.png"/> 
    <div id="copyright" class="wrap"> 
     Some Copyright text 
    </div> 
</div>

CSS

.wrap{ 
    width: 1000px; 
    margin: 0 auto; 
    clear:both; 
} 

ul.menu{ 
    list-style-type: none; 
    margin:0; 
    padding:0; 
} 

.divider{ 
    height:90px; 
    border-left:2px solid white; 
} 

#footer{ 
    width: 100%; 
    height:100px; 
    left:0px; 
} 

#footer_menu { 
    overflow: hidden; 
    float:left; 
    width:85%; 
    background-image: -webkit-linear-gradient(45deg, rgb(0,159,194), rgb(0,15,61)); /* Safari */ 
    background-image: -moz-linear-gradient(45deg, rgb(0,159,194), rgb(0,15,61)); /* Firefox */ 
} 

.footer_column{ 
    width: 175px; 
    padding-left:10px; 
    padding-top:10px; 
    font-size: 12px; 
    line-height: 15px; 
    font-family: "Quicksand"; 
    display:inline-block; 
    color:#FFFFFF; 
} 

#frth_column, #fvth_column{ 
    color:rgb(142,216,248); 
}

來源

2014-05-01 11:39:00 guinatal

版權和頂部標誌行爲正確。問題出現在頁腳菜單上。我添加了一個佈局示例 –

從#footer_menu中刪除「float：left」 – guinatal

當我這樣做的時候，所有的事都有點偏右，包括背景。我想要背景保持不變，但列移動 –

插入text-align:center;在ID footer-menu

#footer_menu { 
    overflow: hidden; 
    float:left; 
    width:85%; 
    background-image: -webkit-linear-gradient(45deg, rgb(0,159,194), rgb(0,15,61)); /* Safari */ 
    background-image: -moz-linear-gradient(45deg, rgb(0,159,194), rgb(0,15,61)); /* Firefox */ 
    text-align:center; // Changed 
}

Fiddle

來源

2014-05-01 11:46:41

這將對齊每列內的文本。我想要的只是「轉移」所有5列，與標識對齊。 –

您希望列在頁腳中間對齊嗎？ –

是的，我添加了一個圖像與我想要菜單的位置。在簡歷中，我希望我的網頁顯示在1024屏幕和更大的屏幕上，其中的數據都在中心這就是爲什麼我創建包裝類 –

居中頁腳網頁

回答

相關問題