详解HTML中字体使用line-height依然不能垂直居中解决办法
2020-09-20 04:09
1596 查看
以 图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #next-button{ height: 54px; text-align: center; color: #fff; background: #e2231a; line-height: 54px; font:16px "Microsoft YaHei","Hiragino Sans GB"; cursor: pointer; margin: 0 auto; width:400px; } </style> </head> <body> <div id="next-button">下一步</div> </body> </html>
在其中,我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中,然而,我们却得到了这样的效果:
我们设置的文本垂直居中并没有效果。而我们改代码为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #next-button{ width:400px; height: 54px; text-align: center; color: #fff; background: #e2231a; font:16px/54px "Microsoft YaHei","Hiragino Sans GB"; cursor: pointer; margin: 0 auto; } </style> </head> <body> <div id="next-button">下一步</div> </body> </html>
的时候,就可以垂直居中。原因就在于如果样式声明列表中有line-height与font,则line-height无效,必须与font一起使用。只要样式声明中没有font,就可使用line-height来设置文本的垂直居中了。
到此这篇关于详解HTML中字体使用line-height依然不能垂直居中解决办法的文章就介绍到这了,更多相关line-height不能垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- ie9不支持line-height_ie9不支持字体垂直居中兼容问题解决篇_IE9中字体不能垂直居中解决方法
- IE7,IE8,IE9 字体不能垂直居中, line-height 不起作用的解决方法
- Android中line-height不居中的解决办法
- 解决使用NSMutableAttributedString 设置不同字体,文字不能居中对齐
- 垂直居中问题不只有 line-height 可以解决,还有一个哥们叫 margin-top
- Bootstrap modal不能垂直居中的解决办法
- 字体小于12px,在魅族,锤子等有些手机上,不能上下居中显示的解决办法
- IE9不支持CSS line-height的文字垂直居中解决方法
- 关于Chrome 浏览器 input输入框 当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法
- Unity3d 使用 BMFONT 制作的艺术字体 不能居中 解决方法
- 设置文字在div中垂直居中,使用line-height
- 关于验证码插件-kaptcha不能在html中使用的解决办法
- html 中input 框 与文字不能垂直居中, 怎么解决?
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- H5 --(解决)安卓的webview中line-height等于height不垂直居中问题
- 解决使用NSMutableAttributedString 设置不同字体,文字不能居中对齐
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- 使用line-height垂直居中时,要注意border的设置
- 设置文字在div中垂直居中,使用line-height
- iOS疯狂详解之iOS9 HTTP 不能正常使用的解决办法