这篇文章主要介绍了详解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不能垂直居中内容请搜索爱安网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持爱安网!

最新资讯
携程高管解读四季度财报:去年直播频道转换率业内最高

携程高管解读四季度财

财报发布后,携程董事长梁建章、CEO孙洁和CFO王肖璠等公
国家航天局发布天问一号探测器拍摄高清火星影像图

国家航天局发布天问一

今天(4日),国家航天局发布3幅由我国首次火星探测任务天问
快讯!SpaceX火箭成功着陆后爆炸

快讯!SpaceX火箭成功着

当地时间3月3日,SpaceX的星船原型试验箭SN-10成功完成1
2月中国手游发行商全球收入排行榜:腾讯网易米哈游分列前三

2月中国手游发行商全

2月米哈游《原神》和《崩坏3》收入分别环比上涨6%和69
“毅力号”火星车将如何影响未来火星探索?

“毅力号”火星车将如

在许多方面,毅力号任务代表了火星探索的下一步进化步骤
携程四季度毛利率达82%同比上升,住宿预订业务营收22亿元

携程四季度毛利率达82

2020年,携程集团的GMV达到3950亿元,连续3年稳居全球在线
最新文章
详解HTML中字体使用line-height依然不能垂直居中解决办法

详解HTML中字体使用li

这篇文章主要介绍了详解HTML中字体使用line-height依
html直接引用vue和element-ui的方法

html直接引用vue和ele

这篇文章主要介绍了html直接引用vue和element-ui的方
在HTML里加载摄像头的方法

在HTML里加载摄像头的

这篇文章主要介绍了如何在HTML里加载摄像头,本文通过实
html父子页面iframe双向发消息的实现示例

html父子页面iframe双

这篇文章主要介绍了html父子页面iframe双向发消息的实
HTML用户注册页面设置源码

HTML用户注册页面设置

这篇文章主要介绍了HTML用户注册页面设置源码,代码简
当div设置contentEditable=true时,重置其内容后无法光标定位

当div设置contentEdit

这篇文章主要介绍了解决当div设置contentEditable=tru