html - How to move the menu vertical align of the grey bar -
i want move menu wordings align vertical on grey bar, please see attachment.
this html code of menu bar
<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">
and css code menu
#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 { 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; }
it's better mark menu unordered list (<ul>
). noted, working example have been better. anyhow, given have, try this:
#nav {line-height: 34px;}
Comments
Post a Comment