css如何使文字垂直居中对齐?

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

一、单行文字垂直居中对齐

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 单行文字实现垂直居中 </title>
		<style type="text/css">
			div {
				height: 100px;
				line-height: 100px;
				border: 1px solid #FF0099;
			}
		</style>
	</head>

	<body>
		<div>现在我们要使这段文字垂直居中显示!</div>
	</body>

</html>

效果图:

1.png

不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码:

div {
padding:25px;
}

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多行文字实现垂直居中 </title>
		<style type="text/css">
			div {
				padding: 25px;
				border: 1px solid #FF0099;
				width: 300px;
			}
		</style>
	</head>

	<body>
<div>
<pre>现在我们要使这段文字垂直居中显示!
div {
padding:25px;
border:1px solid #FF0099;

}
</pre>
</div>
	</body>

</html>

效果图:

2.png

三、多行文本固定高度的居中

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。

注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;

width:760px;
}

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多行文字实现垂直居中 </title>
		<style type="text/css">
			div#wrap {
				height: 300px;
				display: table;
			}
			
			div#content {
				vertical-align: middle;
				display: table-cell;
				border: 1px solid #FF0099;
				width: 300px;
			}
		</style>
	</head>

<body>
<div id="wrap">
<div id="content">
现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!
</div>
</div>
</body>

</html>

效果图:

3.png

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

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

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏