1

何があっても#testmenuを中央に配置できないようです...CSSで何十もの組み合わせを試しましたが、運がありませんでした。少し時間を取って見て、髪が完全に抜けないようにしてください。

#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

4

3 に答える 3

6

問題は、固定要素に自動マージンを適用できないことです。メニュー幅を変えることができるように、私はこれを行います：

#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-07T17:08:02.760 に答える
0

メニューに固定幅を使用しているので、物事は非常に簡単です。次のCSSを#testmenu：に追加します。

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

ここで動作するデモを見ることができます> http://jsfiddle.net/mXTmF/1/

于 2013-01-07T16:46:41.593 に答える
0 
<!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-07T16:47:08.670 に答える