li标签的文字与图片居中对齐

li标签的文字与图片居中对齐,第1张

虽然动手不是太久,但是没想到最近在一个小地方翻了船,一直弄了很久都没有做出来,问题是这样的,最近仿写了一个苹果的导航栏,我用的li标签,因为导航栏中有图片,我就在li标签里面直接加入了img标签,但是很快就出现了一个问题,无论我的图片大小设置为多少,其他li标签里面的文字都会被挤下去,我用了line-height,结果也不管用,以下是出错的时候。

试了很久,最后我终于想起来了这个标签vertical-align:text-top;然后问题就解决了,以下是修改过后的结果以及源码。

首选先设定好你的图片的高度和宽度然后用定位的方式实现图片居中(这个居中是相对于你li的高度)。代码如下供参考

<li style="height:118pxwidth:143pxoverflow:hidden"> 

<img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100)opacity:1display:block position:relative left:?xp top:?px"> </li>


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11937566.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存