html - css3で常に一番上にある(スティッキー)要素を水平方向に中央揃えする方法は?

Question

画像にあるものを達成する必要があります。青色の領域 (水平中央 + 垂直上部 + スティッキー) にメニューを配置できません

position:fixed を使用してみましたが、これが最高でした。

CSS:

.menu 
{   
position:fixed;
height: 40px;
width: 505px;

background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

前もって感謝します。

Answer 1

秘訣は、に設定leftしてから、要素の幅の半分に相当する50%負の値で引き戻すことです。margin-left

.menu {   
    position:fixed;
    width: 505px;
    top: 0; left: 50%;
    margin-left: -252px; /* 505 / 2 */
}

これがフィドルです：http：//jsfiddle.net/heXR7/