Question

我需要一些帮助我！我从事某些工作而无法让它发挥作用。 :)我希望文本与中心对齐。这是图片：http://imageshack.us/photo/my-images/266/sn54.jpg/

有人可以给我一些小费吗？感谢。

以下是我使用的代码：

HTML：

<div id="container">
    <div id="header">
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Protfolio</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
    </div><!-- header end -->
   </div><!-- container end -->

CSS：

#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}

.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}

.nav li{
float:left;
list-style: none;
margin: 10px;}

.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}

.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}

Answer 1

这样做的一种简单方法是在左右nav元素中添加填充，使其等于功能区的宽度。

.nav {
    padding:0 XXpx; /* XXpx = width of the ribbon ends */
}


.nav li {
    width:25%;
    text-align:center;
    margin:0;
}

作为基础，这应该可以解决您的问题。您可能必须根据边距等使用确切的代码来满足您的需求。

或者，请查看本教程，了解如何使用CSS创建此类功能区，而不是完全依赖图像：http://css-tricks.com/snippets/css/ribbon/

Answer 2

在不知道背景图像的尺寸的情况下很难具体，但尝试将背景放在标题元素而不是导航上。然后，您可以将导航UL的宽度设置为功能区图像内部的宽度，并在其上设置自动边距0以使其水平居中

Answer 3

我会用div包装ul这个div有背景图像。比你可以调整ul。

中心导航菜单文本

3 个答案: