0

我有一张图片，我将其用作徽标。

我希望它始终居中（无论窗口大小如何）。

我无法使用自动边距做到这一点。

图像必须越过我的导航底部，该导航位于徽标上方。

HTML：

<div id="logo">

<img src="images/logorz.png" alt="logo" width="180px" />
</div>

CSS：

#logo {
    position: absolute;
    margin-left:41%;
    margin-top:-7%;


}

导航HTML：

<div id="nav">

<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>

资产净值 CSS：

#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:20%;
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    text-align:center;
}



#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}

4

5 回答 5

2

如果您的徽标是width: 180px;并且您希望始终将其居中。你可以这样做。

position: absolute;
left: 50%;
margin-left: -90px;
于 2013-01-01T17:40:34.350 回答
1

无需为此使用 javascript。

你可以这样做：

#logo {
    position: absolute;
    left:50%;
    margin-left:-50px;
    width:100px;


}

注意，元素需要有宽度，负左边距是宽度的一半。

http://jsbin.com/ukexox/1/edit

于 2013-01-01T17:41:21.560 回答
0

如果您需要图像位于导航顶部，请尝试使用 z-index 属性...

像这样的东西......

css {

z-index:2;

}

使用 z-index 将一个元素定位在另一个元素之上...确保您给另一个元素的 z-index 小于这个...

这可能有效...

于 2013-01-01T17:39:55.627 回答
0 
#logo {
    position: relative;
    margin:0 auto;
    width:180px;
}

auto自动设置左边距和右边距，所以#logo总是在页面中居中......一些浏览器需要position:relative完成这项工作......

于 2013-01-01T17:40:27.557 回答
0

您需要有一个包装导航和图像的包装器。图像标签不需要被不必要的 div 包围。然后，您可以将图像样式设置为

image {
    position:relative;
    widhth: image_size_here px;
    margin: auto;
    display:block;

}

这是我保存的一个 jsfiddle 供您参考... http://jsfiddle.net/vASmC/

于 2013-01-01T17:46:13.183 回答