Heim  >  Artikel  >  Web-Frontend  >  横向导航栏中,li内部的文字如何垂直居中?_html/css_WEB-ITnose

横向导航栏中,li内部的文字如何垂直居中?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:23:151704Durchsuche

https://jsfiddle.net/fbfobLo6/1/

现在想做个横向的导航栏,前两个是图片,第三个为文字加图片的格式。图片使用的是background来实现。但文字一直沉底,沉到li的底部上,试了好几种方法都没成功。。现在想让第三个选项中的img和文字都垂直居中,然后最好可以在当前li中水平居中,有前辈指导怎么搞吗?具体代码看上面的链接。


回复讨论(解决方案)

设置 li 中的  line-height 等于导航的高度

设置 li 中的  line-height 等于导航的高度

不起作用,设置line-height后,会自动把文字dom下移,使得文字的baseline还是和li的bottom对齐。

line-height,或者设置一下内边距凑合一下。

.play-state 修改 line-height:0px;追加 overflow:hidden;
.icon-play 追加 vertical-align: middle;

多谢楼上帮助!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn