Can not Center Fixed Div

我已經閱讀了無數的線程在這裏和其他人，但還沒有找到一個適合我的。我試圖讓這個darn div集中在我的頁面底部。它有點像一個頁腳，但不完全。Can not Center Fixed Div

HTML：

<div id="menucontainer"> 
    <div id="menu"> 
     <ul> 
      <li><a href="http://www.uah.edu"><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></a></li> 
      <li>another big test</li> 
     </ul> 
    </div> 
</div>

CSS：

#menucontainer{ 
    position:fixed; 
    bottom:0; 
} 

#menu{ 
    position:fixed; 
    padding-top:5px; 
    padding-bottom:15px; 
    background-color:rgba(0,0,0,0.5); 
    bottom:0px; 
    height:200px; 
    width:1218px; 
    border:3px solid #000000; 
    box-shadow:0px -5px 5px #888888; 
} 

li{ 
    float:left; 
    margin-left:-10px; 
    margin-right:-10px; 
    text-align:center; 
    list-style:none; 
    height:190px; 
    width:300px; 
    border-left:2px solid #FFFFFF; 
    border-right:2px solid #FFFFFF; 
}

來源

2013-12-23 Hunter

請過濾您的代碼，以便我們只看到*您的問題的相關部分。 –

你想要居中哪個div？ – davidb

我認爲OP希望以css的外觀爲中心#menucontainer，給出的代碼絕對可以更短，更精確。很難判斷居中的部分不起作用 – Huangism

這應該是所有你需要：

#menucontainer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; /* ADD - make sure this container spans the entire screen */ 
    text-align: center; /* Align contents to the center */ 
} 

#menu { 
    /* remove position: fixed */ 
    display: inline-block; 
    margin: 0 auto; /* Centers the block */ 
    text-align: left; /* Reset the text alignment */ 
    ... /* The rest stays the same */ 
}

來源

2013-12-23 15:15:26

工程太棒了！謝謝！ – Hunter

<style> 
     #menucontainer{ 
     position:absolute; 
     bottom: -420px; 
     height: 200px; 
     margin: 0 auto; 
     position: relative; 
     width:1218px; 
     } 

     #menu{ 
     position: relative; 
     padding-top:5px; 
     padding-bottom:15px; 
     background-color:rgba(0,0,0,0.5); 
     bottom:0px; 
     height:200px; 
     border:3px solid #000000; 
     box-shadow:0px -5px 5px #888888; 
     } 

     li{ 
     float:left; 
     margin-left:-10px; 
     margin-right:-10px; 
     text-align:center; 
     list-style:none; 
     height:190px; 
     width:300px; 
     border-left:2px solid #FFFFFF; 
     border-right:2px solid #FFFFFF; 
     } 
     </style

enter image description here

來源

2013-12-23 15:56:17

DEMO

我做了一些fundamential變化。首先，你的#menucontainer。你不需要固定的位置 - 我們可以使用'粘性頁腳'技術使它總是被拖到底部;因爲我們知道寬度，margin: 0 auto;將幫助我們將其居中居中。

#menucontainer{ 
    position:relative; 
    width: 1218px; 
    height:200px; 
    margin: 0 auto; 
}

Secondy，我已經添加了一些假的內容（.fake-content DIV），以幫助你的想法怎麼這一切都將眼光放在網站上。

我也已經添加了clearfix方法來適當高度渲染浮動子元素。更多信息here（也很容易找到其他地方）。

置頂頁腳技術已採取從CSS Tricks site

有問題嗎？那是你在找什麼？

來源

2013-12-23 15:57:38

Can not Center Fixed Div

回答

相關問題