3

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

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

这是代码：

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


}
4

3 回答 3

1

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

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

.fixedtop
{
    position: fixed;
    top: 0;
    left: 50%
    width: 600px;
    height: 30px;
    margin-left: -300px;
}
于 2012-10-14T10:57:34.237 回答
0

您需要的是以下内容：

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



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

基本上 margin: auto 在 position: fixed 或 absolute 上不起作用。所以我们所做的就是将其定位在距左侧 50% 的位置。因为我们知道 .fixedtop 是 600px 宽，所以我们给它一个左边距 -300px 以使其再次在页面上居中。由于 .language2 是块元素 (div)，因此您无需为其指定宽度和高度。从技术上讲，利润：汽车也变得过时了。我只是暂时给出了两种背景颜色，以便您可以更好地看到它们的行为。你可以稍后删除它们。希望这可以帮助。

于 2012-10-14T10:57:39.353 回答
0

您为父固定顶设置此样式

parentfixedtop{
 position:relative;
}
于 2012-10-14T11:02:56.610 回答