码迷,mamicode.com
首页 > 其他好文 > 详细

单行中文字和图片的相关height和line-height特性

时间:2017-04-04 16:15:22      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:设置   导致   显示   png   垂直居中   image   文本   bsp   str   

       这几天在做仿京东的产品页,发现在制作过程中的一些问题,需要好好研究下。

技术分享

需要实现的效果如上图所示:

技术分享

在写CSS样式的时候,对于我的关于竖线的做法是:

技术分享

设置高度为14,border样式,但导致了一个问题:

技术分享

发现文本是居中的,但是a标签元素却只有14px的高度,因而导致背景图片和文字没有对齐,这一点需要重视。

后来的做法,就是设置b标签设置竖线:

技术分享

在这里,标签b会受到line-height的影响,从而垂直居中显示

 

单行中文字和图片的相关height和line-height特性

标签:设置   导致   显示   png   垂直居中   image   文本   bsp   str   

原文地址:http://www.cnblogs.com/xuzhudong/p/6665015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!