以菜單按鈕

我一直在試圖一切我能想到的，（這不是很好）我試着去中心在垂直方向的按鈕上的文本，這裏移動文本是代碼：以菜單按鈕

<div id="menu"> 
      <ul class="clearfix"> 
       <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
       <li><a href="#"><i class="fa fa-hdd-o"></i> Services</a></li> 
       <li><a href="#"><i class="fa fa-area-chart"></i> Pricings & plans</a></li> 
       <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li> 
       <li><a href="#"><i class="fa fa-users"></i> The Team</a></li> 
       <!-- <li><a href="#"><i class="fa fa-sign-in"></i> Login</a></li> 
       <li><a href="#"><i class="fa fa-user"></i> Register</li>--> 
      </ul>

和CSS：

#menu { 
margin: 20px auto 0 auto; 
width: 60% 
} 
#menu ul { 
padding:0px; 
list-style-type:none; 
} 
#menu a { 
background-color: #EBEBEB; 
font-size: 15px; 
line-height: 10px; 
height: 60px; 
width: 100px; 
position: relative; 
padding: 0 20px; 
float: left; 
margin-top: 5px; 
display: block; 
color: #385c5b; 
letter-spacing: 0.5px; 
text-transform: uppercase; 
font-weight: bold; 
text-align: center; 
text-shadow: 1px 1px 1px rgba(255,255,255,0.3); 
border-radius: 3px 3px 0 0; 
border-color:#eaeaea; 
box-shadow:1px 1px 5px rgba(0,0,0,0.7); 
margin-bottom: 5px; 
} 
#menu a:hover { 
background-color:#5ba4b5; 
} 
#menu li { 
float:left; 
display:block; 
margin-right:5px; 
}

感謝您的任何答覆或其他技術。

來源

2014-11-21 Zphex

您可以使用line-height看到這個http://jsfiddle.net/sfnxkav5/

#menu ul li a{ 
line-height:50px; 
}

這將不完全居中，但它是適合你給

來源

2014-11-21 13:15:04 Akshay

它工作的部分原因是唯一的問題是在標籤「Pricings and Plans」中的文本片段「計劃」從盒子中移出。 – Zphex 2014-11-21 13:17:44

@Zphex http://jsfiddle.net/sfnxkav5/2/嘗試這個 – Akshay 2014-11-21 13:23:35

這個「價格和計劃」你需要設置具體的CSS。將解決您的問題。 – Lakhan 2014-11-21 13:58:34

您可以在錨標籤使用display:table-cell高度

JSfiddle Demo

#menu { 
 
    margin: 20px auto 0 auto; 
 
    width: 60% 
 
} 
 
#menu ul { 
 
    padding: 0px; 
 
    list-style-type: none; 
 
} 
 
#menu a { 
 
    background-color: #EBEBEB; 
 
    font-size: 15px; 
 
    height: 60px; 
 
    width: 100px; 
 
    position: relative; 
 
    padding: 0 20px; 
 
    margin-top: 5px; 
 
    color: #385c5b; 
 
    letter-spacing: 0.5px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); 
 
    border-radius: 3px 3px 0 0; 
 
    border-color: #eaeaea; 
 
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); 
 

 
    display: table-cell; 
 
    vertical-align: middle; 
 

 
} 
 
#menu a:hover { 
 
    background-color: #5ba4b5; 
 
} 
 
#menu li { 
 
    float: left; 
 
    display: block; 
 
    margin-right: 5px; 
 
    margin-bottom: 5px; 
 
}

<div id="menu"> 
 
    <ul class="clearfix"> 
 
    <li><a href="#"><i class="fa fa-home"></i> Home</a> 
 
    </li> 
 
    <li><a href="#"><i class="fa fa-hdd-o"></i> Services</a> 
 
    </li> 
 
    <li><a id="a" href="#"><i class="fa fa-area-chart" ></i> Pricings & plans</a> 
 
    </li> 
 
    <li><a href="#"><i class="fa fa-envelope"></i> Contact</a> 
 
    </li> 
 
    <li><a href="#"><i class="fa fa-users"></i> The Team</a> 
 
    </li> 
 
    <!-- <li><a href="#"><i class="fa fa-sign-in"></i> Login</a></li> 
 
       <li><a href="#"><i class="fa fa-user"></i> Register</li>--> 
 
    </ul>

來源

2014-11-21 13:47:26

回答

相關問題