详解HTML中字体行使line-height依然不能垂直居中办理步伐
|
以图片所示的结果为例，显然我们不只要使“下一步”文本程度居中，还要垂直居中，此时我们写代码如下： <!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不能垂直居中内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
