如何對齊導航欄中文本的位置？

我希望導航欄中的文本更加靠近白色欄的中心，菜單圖標與「菜單」一詞對齊。

任何指導表示讚賞。

HTML代碼：

<!doctype html> 

<html> 
    <head> 
     <meta charset="UTF-8"/> 
     <title> Foodstant Delivery </title> 
     <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" /> 
     <link rel="shortcut icon" href="images/favicon.ico" /> 
    </head> 

<body> 
    <div id="container"> 
     <figure id="logo"> 
      <img src="images/logo22.png" alt="Foodstant Delivery logo" width="" height="" /> 
     </figure> 

     <figure id="abtex"> 
      <img src="images/abtex222.png" /> 
     </figure> 

<div id="navbar"> 
    <ul> 
     <li class="OP"><img src="images/order.png" /><a href="Orders.html">Orders</a></li> 
     <li class="MP"><img src="images/menupic3.png" /><a href="Menu.html">Menu</a></li> 
     <li class="CUP"><img src="images/contact.png" /><a href="ContactUs.html">Contact</a></li> 
     <li class="TCP"><img src="images/Pen.png" /><a href="Jobs.html" target="_blank">About</a></li> 
     <li class="JP"><img src="images/pin.png" /><a href="TC.html">Jobs</a></li> 
    </ul> 
</div> 

</div> 

</body> 

</html>

CSS代碼：（有關）

#navbar { 
    background: rgb(246,248,249); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0); /* IE6-9 */ 

    border-top-left-radius: 10px; 
    border-bottom-left-radius:10px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius:10px; 

    position: absolute; 
    top: 200px; 
    left: 150px; 
    width: 1000px; 

    background-position:center; 

    font-size: 26px; 
    font-family: 'Conv_LITHOSPRO-REGULAR'; 

    box-shadow: 3px 5px 10px #888888;  
} 
#navbar ul { 
    list-style-position:inside; 
    padding-top: 10px; 
} 


#navbar ul li {  
     display: inline; 
     padding:0 60px 0px 0px; 
     margin-bottom: 10px; 
     list-style-type:disc; 
    } 


#navbar ul li.OP { 
     padding-left: 40px; 
} 

a:link { 
    color: #EF174A; 
    } 

a:visited { 
    color: #BF4100; 
    } 

a:hover { 
    color: black; 
    background-color:#D2D2D2; 
    border-radius: 10px; 
    } 

a:active { 
    color: #918FBC; 
    } 

a { 
    text-decoration:none; 
} 

#navbar ul li.OP a { 
    padding-left: 10px; 
}

來源

2012-07-22 TheKraven

你的意思是垂直對齊嗎？ – Nick 2012-07-22 09:03:22

<img src="" align="absmiddle">

這將對齊文本到圖像的中間。

，或者你可以用CSS做：

.your_class { 
    vertical-align:middle; 
}

來源

2012-07-22 09:02:59

乾杯，你的解決方案工作。 – TheKraven 2012-07-22 09:15:52

沒問題！沒有upvote？ – 2012-07-22 09:17:34

給文本行高度等於欄的高度。

但照顧的襯墊。

來源

2012-07-22 09:35:40 DorinV

如何對齊導航欄中文本的位置？

回答

相關問題