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

-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

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

回答

相关问题