css让文字垂直居中

美奇开发工作室

于 2020-07-23 21:07:33 发布

阅读量351

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq15577969/article/details/107547885

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

使用vertical-align:middle设置在父元素中的位置：

html+css代码：

<!DOCTYPE html>
<html>

	<head lang="zh">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8" />
		<title>css让文字垂直居中</title>
		<style>
			.content {
				width: 500px;
				margin: 0 auto;
				height: 200px;
				background: red;
			}		
			.pox {
				padding: 10px;
				height: 100px;
				text-align: center;
				display: table-cell;/*将div设置为table-cell*/
				vertical-align: middle;/*设置该元素在父元素中的位置*/
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="content">
			我是div中的文字
			<div class="pox">
				<a>我是子元素的文字</a>
			</div>
		</div>
	</body>
</html>