html中如何让文本上下垂直居中?

html中如何文本上下垂直居中?下面本篇文章给大家介绍一下方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

html 文字上下垂直居中

只是文字的是话可以考虑使用line-height,,,,

当把 line-height 的高度设置和 height 高度一样就能使 文字垂直居中

一段简单的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		
		body{
			margin: 0;
		}
		
		#first{
			width: 100%;
			height: 50px;
			background: #e5e5e5;
			line-height: 50px; 
		}
		.me{
			font-size: 18px;
			color: #000000;
			
		}
			
	</style>
	<body>
		 <div id="first">
		 	<span class="me">我是谁</span>
		 </div>
		
	
	</body>
</html>

效果图:

1.png

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是html中如何让文本上下垂直居中?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏