为什么按钮中的文字没有垂直居中

2019-04-21  本文已影响0人  bluesky_647e

有个新同事写的按钮没有一个是上下垂直居中的,让我帮忙,给找找原因。好吧,我来了。

先找到原因,然后再解决问题。我看了一下代码,button标签里面有个span标签。他给button标签设置了块属性,然后加上下左右的padding,span设置了1.5倍行高!a标签设置了块属性,然后加上下左右的padding,span设置了1.5倍行高,然后加上下左右的padding!

首先,按钮如果button或者是a标签,里面是没有必要再加一个span标签滴,因为按钮中只有两个文字,没有其他的内容。修改方案一,直接去掉里面的span标签,这个是规范的写法。修改的话,需要修改html,整个网站中大概有20处吧,比较麻烦。修改方案二,保留span标签,算一下他父级元素的总高,把这个总高设置为span的行高就可以了。方案二只需要修改css,这样修改比较快捷!

span为行内元素,上下的padding值对他不起作用。

上一篇下一篇

猜你喜欢

热点阅读