Question

我想在灰色条上移动菜单文字垂直对齐，请查看附件。

http://i1127.photobucket.com/albums/l622/sugarboylovephoto/ScreenShot2013-05-21at124323PM_zps317fe22f.png

这是菜单栏的HTML代码

<body>

    <div id="header">
        <div class="head-padding"></div>
        <div id="head"><img src="images/head01.png" width="1010" height="106"></div>

        <div id="nav" class="navbgimg"> 
            <a href="#about" class="mid">About</a>
            <a href="#studying">Studying Science</a>
            <a href="#SSCI">About SSCI</a> 
            <a href="#highlights">Programme Highlights </a> 
            <a href="#life">Student Life</a> 
            <a href="#fun">Fun Fact</a> 
            <a href="#tips">Interview Tips</a>  </div>
            <div id="headwhite"><img src="images/head02.png" width="1010" height="20"></div>

        </div>

        <div id="page-wrap">
            <a name="about"></a>
            <div id="page1">

这是菜单的css代码

#header {
    position:fixed;
    z-index:1;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    height:160px; 
    width:100%;
}

#head {
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    background:#2848ad; 
    height:106px; 
    width:1010px;
}

.navbgimg {
    background-image: url(../images/menubar01.png);
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    width:1010px;
    height:34px; 
    letter-spacing: 0.1em
}

#nav {
    font-style: normal;
    font-weight: 400;
    font-size: 12pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    height:34px; 
    width:1010px;
    text-align: center;
}

#nav a { padding-right: 20px; display:inline-block; }

#headwhite {
    margin-left:auto;
    margin-right:auto;
    top:150px;
    height:20px; 
    width:1010px;
}

#page1 {
    position:relative;
    top:150px;
    height:390px;
    width:1010px;
    background:#00c9e5;
}

Answer 1

最好用无序列表（<ul>）标记这样的菜单。如上所述，一个工作的例子会更好。无论如何，鉴于你拥有的东西，你可以尝试这样的东西：

#nav a {line-height: 34px;}

Answer 2

设置行高：34px;在#nav中：

#nav {
    font-style: normal;
    font-weight: 400;
    font-size: 12pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    height:34px;
    line-height:34px; /*vertically align the text inside nev*/
    width:1010px;
    text-align: center;
}

我希望它能解决你的问题。但是，您可以查看此页面以了解line-height属性的工作原理。 http://www.tutorialrepublic.com/css-tutorial/css-text.php

如何移动菜单垂直对齐灰色条

2 个答案: