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;
}

Answer 2

您需要的是以下内容：

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



        .language2
        {
            margin: 0 auto;
            background: #0F9;
        }

基本上是保证金：自动不在头寸上工作：固定或绝对。所以我们所做的就是从左边开始50％。由于我们知道.fixedtop是600px宽，我们给它一个-300px的左边距再次将它居中在页面上。由于.language2是块元素（div），因此您无需为其指定宽度和高度。从技术上讲，保证金：汽车也已经过时了。我只给出了两种背景颜色，以便你可以更好地看到它们的行为。你可以稍后删除它们。希望这会有所帮助。

Answer 3

您为父级固定顶部

设置此样式

parentfixedtop{
 position:relative;
}

试图集中顶级DIV酒吧

3 个答案: