如何使用CSS垂直居中文本?

CSS的常见任务是垂直居中文本或图像;虽然CSS2不支持垂直对齐,但我们可以通过组合一些属性来垂直居中块。下面本篇文章就来给大家介绍一下使用CSS垂直居中文本的方法,希望对大家有所帮助。

方法一:指定将外部块格式化为表格单元格

表格单元格的内容可以垂直居中,将外部块格式化为表格单元格就可垂直居中文本。

示例:将段落置于具有特定给定高度的块内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.container {
				width: 400px;
				height: 200px;
				border: 1px solid red;
				min-height: 10em;
				display: table-cell;
				vertical-align: middle
			}
			
		</style>
	</head>

	<body>
		<div class="container">
			这是一段测试文本!
		</div>

	</body>

</html>

效果图:

670a57247a6b5bad8c2590a221f422c.png

方法二:使用line-height属性

这是垂直对齐文本的另一种方法。此方法适用于单行和多行文本,但仍需要固定高度的容器:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.container{
			  height: 200px;
			  line-height: 200px;
			  text-align: center;
			  border: 2px dashed #f69c55;
			}
			span {
			  display: inline-block;
			  vertical-align: middle;
			  line-height: normal;
			}
						
		</style>
	</head>

	<body>
		<div class="container">
			<span>
			这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
			这是一段测试文本!
			</span>
		</div>

	</body>

</html>

效果图:

fd8f470c70ec65b39cdef1b6ed93a7a.png

CSS只要调整div的大小,通过将div的line-height属性设置为其高度来对齐span,并使span具有vertical-align:middle的内联块。然后它将跨度的行高设置为正常,因此其内容将在块内自然流动。

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

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏

1/1