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

我已经在这个相当长一段时间了，似乎无法控制它。我想知道如何让我的“.logo”类中心？CSS/HTML - 定位绝对定位图像

#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>

在此先感谢！

来源

2012-04-12 D SPECIAL

你试过对齐：center; ？ – Soader03 2012-04-12 16:02:44

u意思是文本对齐：中心 – Ayyash 2012-04-12 16:04:37

如果你想标志div居中删除绝对位置并添加文本对齐：中心;如果您希望徽标图像在div内居中，只需添加background-position：center center; – Ayyash 2012-04-12 16:06:20

我会创建一个right和left性质相同的一个div，把我对象在div，并且或者设置margin-right和margin-left属性的子对象auto或text-align属性设置为center。这应该使大多数物体居中。

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

来源

2012-04-12 16:06:51

只需添加background-position：center center; 并更好地定义背景：

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

来源

2012-04-12 16:09:42 Ayyash

有一些解决方案。关于绝对的一个字，但它是'婊子'。

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

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

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

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

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

来源

2012-04-12 16:17:00

使用余量：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-12 17:27:02 srini

既然你有一个固定的宽度容器保持绝对的元素，你真正需要做的就是添加：

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

为.logo，你很好。左边距应该是绝对元素宽度的1/2。这，假设你只是为了一个水平中心。垂直方向的作用与顶部/边缘顶部相似，但这需要固定的高度。

来源

2012-04-12 17:49:30 Brian

非常直截了当！ – jaysonragasa 2014-05-25 14:41:19

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

回答

相关问题