css实现多行文本在容器内垂直居中

最新推荐文章于 2023-05-30 20:44:57 发布

zeroyulong

最新推荐文章于 2023-05-30 20:44:57 发布

阅读量2.7k

点赞数 1

分类专栏： css 文章标签：垂直居中 css 文字居中

本文链接：https://blog.csdn.net/zeroyulong/article/details/80002851

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

提供两种方法line-height和flex布局方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字固定容器居中</title>
		<style type="text/css">
			.box1 {
				background-color: #ccc;
				width: 300px;
				height: 800px;
				margin: 100px auto;
				line-height: 800px;
			}
			
			.box1 span {
				display: inline-block;
				line-height: 20px;
				vertical-align: middle;
			}
			
			.box {
				display: flex;
				width: 500px;
				height: 800px;
				margin: 50px auto;
				border: 2px solid #000;
				align-items: center;
				/*垂直轴居中*/
			}
			
			.box span {
				/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/
				flex: 1;
				display: flex;
				justify-content: center;
				/*水平轴居中*/
			}
		</style>
	</head>

	<body>
		<!--line-height-->
		<div class="box1">
			<span>多行居中测试多行居中测试多行居中
	         	测试多行居中测试多行居中测试多行居中测试多行居中测
	         	试多行居中测试多行居中测试多行居中测试多行居中测试多行居中
	        </span>
		</div>
		<!--flex布局-->
		<div class="box">
			<span>span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试span多行居中测试</span>
		</div>

	</body>

</html>

zeroyulong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现多行文本在容器内垂直居中

提供两种方法line-height和flex布局方法&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文字固定容器居中&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫