<ul> 水平导航栏...垂直对齐元素

Posted

技术标签:

【中文标题】<ul> 水平导航栏...垂直对齐元素【英文标题】:<ul> horizontal nav bar... vertically-align element 【发布时间】:2012-05-06 17:10:59 【问题描述】:

我目前有以下代码。我试图让第二个、第三个和第四个“li”元素在导航栏的中间垂直对齐。第一个“li”是图片,第二个到第四个都是文字。

这是目前的截图。

http://i49.tinypic.com/bfesl3.png

我尝试过使用“vertical-align:middle”和填充。请注意,如果在 Firefox 中而不是在其他浏览器中查看,则第二个、第三个和第四个“li”元素在中间垂直对齐。

这是我的代码。

<ul class = "nav">

<li><a href="index.html" style="border-right:1px #FFFFFF solid; padding-top:4.6px; padding-bottom:17.3px;"><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></a></li>
<li><a href="aboutme.html" style="vertical-align:middle;padding-top:32px;margin-left:-15px;padding-bottom:14px;padding-right:20px;border-right:1px #ffffff solid;">about me</a></li>
<li><a href="films.html" style="vertical-align:middle;padding-top:32px;margin-left:1px;padding-bottom:14px;padding-right:30.5px;border-right:1px #ffffff solid;">films</a></li>
<li><a href="contactme.html" style="vertical-align:middle;padding-top:32px;margin-left:-20px;padding-bottom:14px;padding-right:11px;border-right:1px #ffffff solid;">contact me</a></li>

<span class="navlinkimages">
<li><a href=  target="_blank"><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_facebook.png"  style = "margin-right:-14px;"/></a></li>
<li><a href=  target="_blank"><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></a></li>
</span>
</ul>`

CSS 代码:

.nav 
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    font-family:DinC;
    padding-bottom:5px;
    background-color: #000000;
    border-radius:5px;
    height:35px;


.navlinkimages 
  float:right;
  padding-top:5px;


.nav li 
  display:inline;
  vertical-align:middle;


ul.nav a:hover 
  color:#FA4B2A;


.nav li img 
  vertical-align:middle;


ul.nav a
  text-decoration:none;
  margin-right:27px;
  color:#FFFFFF;

有没有办法让它在所有浏览器上垂直对齐?

谢谢!

【问题讨论】:

【参考方案1】:

试试这个:

.nav li 
  display:inline;
  vertical-align:middle;
  line-height:35px;

【讨论】:

或者甚至display: inline-block。您不应该只在块状元素中垂直对齐吗?【参考方案2】:

li a 的每个middle 一个班级:

<li>
    <a class="middle" href="aboutme.html" style="REDACTED">about me</a>
</li>

定义middle 喜欢:

.middle 
    line-height: 35px; /** or same as ul height */

内联元素始终在其行高内垂直居中。

DEMO

【讨论】:

以上是关于<ul> 水平导航栏...垂直对齐元素的主要内容,如果未能解决你的问题,请参考以下文章

水平 ul 导航与右侧对齐

列表导航中的垂直对齐伪元素

请教大家一个关于css水平导航栏的问题?

元素的水平收缩方式

原生js代码水平导航栏效果

如何让我的 <ul> 悬停在同一个位置开始?