固定（底部）位置的中心DIV

無論如何，我似乎無法將#testmenu居中......我嘗試了CSS中的幾十種組合，但沒有運氣。請花一分鐘時間看看，並保存我的頭髮不被完全拉出。固定（底部）位置的中心DIV

#abc { 
    position:absolute; 
    bottom: 0; 
    width:100%; 
    left:0; 
    text-align:center; /* IE 5.x centering */ 
} 

#testmenu { 
    line-height:2em; 
    width:960px; 
    color:#FFF; 
    background:#00F; 
    background:#C00; 
    margin:0 auto; 
} 

<div id="abc"> 
    <div id="testmenu"> 
     This should remain 'fixed' bottom center. 
    </div> 
</div>

這裏是什麼，我以後就是一個簡單的jsfiddle：http://jsfiddle.net/mXTmF，也是網頁的工作演示：http://ht-webcreations.com/vildiridis/index.php

來源

2013-01-07 bikey77

是奇特，我在看看此刻卻發現根本問題是困難的，很奇怪 – Kayo

的問題是，你不能自動適用邊際到固定的元素。要允許不同的菜單寬度，我應該這樣做：

#abc { 
    bottom: 0; 
    height: 30px; /* forces #testmenu to the bottom */ 
    margin: 0 auto; 
    position: fixed; 
    width: 100%; 
} 
#testmenu { 
    background: none repeat scroll 0 0 #FF0000; 
    bottom: 0; 
    font-size: 10px; 
    height: 30px; 
    overflow: hidden; /* prevents extra space underneath from 33px-high menu items */ 
    margin: 0 auto; 
    max-width: 1000px; 
    width: 960px; 
}

來源

2013-01-07 17:08:02 isherwood

事情很簡單，因爲你正在使用的菜單固定寬度。添加以下CSS您#testmenu：

position: relative; 
left: 50%; 
margin-left: -480px;

這裏你可以看到一個工作演示>http://jsfiddle.net/mXTmF/1/

來源

2013-01-07 16:46:41 BenM

有興趣瞭解爲什麼這一直downvoted ... – BenM

可能是因爲它需要明確的保證金值。它不允許改變元素寬度。 – isherwood

@isherwood除了現在差不多2年之久（並且有更好的方法來實現這個目標），你是對的，它不允許改變寬度。然而，最初的問題**明確**處理一個**固定寬度**元素，因爲答案很清楚地陳述了...... – BenM

<!DOCTYPE html> 
<html> 
<body> 
<div style='border:1px solid; width:960px; height:200px; position:absolute; left:50%; bottom: 100px; margin-left:-480px;'>hallo</div> 
</body> 
</html>

在CSS中

#testmenu { 
width: 960px; 
position: absolute; 
left: 50%; 
bottom: 100px; 
margin-left:-480px; 
}

來源

2013-01-07 16:47:08 derWilly

嘗試提供與問題相關的答案。你的問題有正確的方法，但是OP可能很難說出他如何將它整合到他的具體問題中。 – BenM

@BenM：不能理解你的評論家，這是一個單擊複製和粘貼示例。 – derWilly

固定（底部）位置的中心DIV

回答

相關問題