0

我在这方面已经有一段时间了，似乎无法掌握它。我想知道如何使我的“.logo”类居中？

#wrap {
    width: 960px;
    height: auto;
    min-height: 700px;
    margin: 0 auto;
}

.logo {
    background: url(../images/logo.png);
    width: 269px;
    height: 126px;
    z-index: 1000;
    position: absolute;
}        

<div id="wrap">
    <div class="logo"></div>
    <div id="nav"></div>
</div>

提前致谢！

4

5 回答 5

3

由于您有一个固定宽度的容器来保存绝对元素，因此您实际上需要做的就是添加：

left: 50%;
margin-left: -134px;

到.logo，你很好。margin-left 应该是绝对元素宽度的 1/2。假设您只选择水平中心。垂直与顶部/边距顶部类似，但这需要固定高度。

于 2012-04-12T17:49:30.597 回答
1

只需添加背景位置：中心中心；并更好地定义背景：

background-image: url() 
background-repeat: no-repeat; 
background-position: center center; // you can have top bottom left right as well
于 2012-04-12T16:09:42.387 回答
0

使用边距：0 自动；

通过将其左右边距宽度设置为“自动”，此徽标水平居中。这是使用 CSS 实现水平居中的首选方式

示例 CSS

          .logo{
                background: url(../images/logo.png);
                width: 269px;
                height: 126px;
                z-index: 1000;
                margin:0px auto; //or margin:0 auto;
                 } 

                }
于 2012-04-12T17:27:02.917 回答
0

我将创建一个div与right和left属性相同的对象，将我的对象放在 div 中，然后将子对象的margin-right和属性设置为或将属性设置为。这应该使大多数对象居中。margin-leftautotext-aligncenter

顺便说一句，小心绝对定位。它会变得丑陋。

于 2012-04-12T16:06:51.700 回答
0

有一些解决方案。一个关于绝对的词，它是“婊子”。

http://jsfiddle.net/UY2FC/4/

http://jsfiddle.net/UY2FC/3/

http://jsfiddle.net/UY2FC/1/

每个人都做同样的工作，但有细微的差别。

不过，z-index 是怎么回事？你在掩饰什么吗？

于 2012-04-12T16:17:00.703 回答