css - 试图居中顶部 DIV 栏

Question

我将 div 栏设置为不滚动，因此它将始终显示在网站顶部。在这个栏内，我有另一个 div 框，里面有两个按钮，它们向右浮动，所以它们总是在右上角。

问题是我希望按钮居中于页面的右上角而不是右上角。相反，如果主体元素居中，则按钮将位于居中元素的右上角。

这是代码:

<DIV class="fixedtop">
        <div class="language2">
            <div class="english"> <font id="buttontxt">ENGLISH</font></div>

            <div class="spanish"> <font id="buttontxt">SPANISH</font></div>

        </div>
    </DIV>

这是顶部栏的 CSS:

   .fixedtop
{
    position: fixed;
    margin-left: 0 auto;
    margin-right: 0 auto;
    top: 0px;
    width:600px;
    height: 30px;
}



.language2
{
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    width: 600px;
    height: 30px;
    margin-right: 0px;
}

.spanish
{
    background-color:00ADEF;
    float: right;
    margin-right: 4px;
    padding-top: 10px;
    display: inline-block;
    width: 100px;
    height:30px;
    color:black;
    text-align: center;
    vertical-align: middle;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 3px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 3px 2px rgba(50, 50, 50, 0.75);
}

.english
{
    background-color:00ADEF;
    float: right;
    margin-right: 15px;
    display: inline-block;
    padding-top: 10px;
    width: 100px;
    height:30px;
    color:black;
    text-align: center;
    vertical-align: middle;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 3px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 3px 2px rgba(50, 50, 50, 0.75);


}

Answer 1

margin-left 和 margin-right 仅接受 1 个参数，而不是您尝试传入的两个参数。不幸的是，您不能使用 margin: 0 auto 使 CSS 中的固定元素居中。

因此，您必须将 left 位置设置为 50%，然后将左边距设置为元素宽度的负一半:

.fixedtop
{
    position: fixed;
    top: 0;
    left: 50%
    width: 600px;
    height: 30px;
    margin-left: -300px;
}