详解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不能垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ （编辑：天瑞地安资讯网_保定站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
- sql-server – 具有UNIQUE索引的列中的多个NULL值
- sql-server – 如何对服务器上的所有数据库执行S
- sql-server-2008 – 参数嗅探与VARIABLES vs重新
- sql – 当我想使用数据库约束但只标记为已删除而
- SQL Server：从VARCHAR(MAX)字段替换无效的XML字
- SQL表连接中ON和WHERE子句之间的区别
- sql-server – 子查询的别名与主查询的别名相同
- sql – 如何重用大型查询而不重复它？
- sql-server-2008 – 使用PIVOT SQL Server 2008时
- sql-server – 处理多租户数据库体系结构中越来越