Question

我已经在这里呆了很长一段时间了，似乎无法抓住它。我想知道如何使我的“.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>

提前致谢！

Answer 1

由于你有一个固定宽度的容器，所以你需要做的就是添加：

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

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

Answer 2

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

background-image: url() 
background-repeat: no-repeat; 
background-position: center center; // you can have top bottom left right as well

Answer 3

我会创建一个div，right和left属性相同，将我的对象放入div中，然后设置margin-right和{{1}子对象的属性为margin-left或将auto属性设置为text-align。这应该是大多数对象的中心。

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

Answer 4

有一些解决方案。关于绝对的话，'婊子'就是这样。

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

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

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

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

虽然，z-index是什么？你在掩饰什么吗？

Answer 5

使用保证金：0自动;

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

示例css

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

                }

CSS / HTML - 居中绝对定位图像

5 个答案: