如何移動灰色條的菜單垂直對齊

-1

我想在灰色條上移動垂直對齊的菜單字樣，請參閱附件。如何移動灰色條的菜單垂直對齊

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

這是菜單欄

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

的HTML代碼，這是菜單

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

來源

2013-05-21 Anthony Lo

我會更清楚如果你讓你的代碼[小提琴]（http://jsfiddle.net/）。 – Praveen

這是更好地標記這樣的菜單CSS代碼與一個無序列表（<ul>）。如上所述，一個可行的例子會更好。無論如何，鑑於你有什麼，你可以嘗試這樣的事情：

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

來源

2013-05-21 05:13:05

Thx，它適合我！ –

set line-height：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; 
}

我希望它能解決您的問題。不過，您可以查看此頁面以瞭解行高屬性的工作原理。 http://www.tutorialrepublic.com/css-tutorial/css-text.php

來源

2013-05-21 05:18:15 Alex

如何移動灰色條的菜單垂直對齊

回答

相關問題