css多行文本的垂直居中方法

最新推荐文章于 2023-02-28 22:13:56 发布

ylzsmallsun

最新推荐文章于 2023-02-28 22:13:56 发布

阅读量747

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/yhuohuo/article/details/49494579

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<style>
			html,body{  
			 width: 100%;
			 height: 100%;
			}
			
			.wrap{
			 display: flex;
			 width:400px;
			 height: 500px;
			 background-color: yellow;
			 align-items: center;   //标记1
			 }
			 .ele{
			   /*margin:auto;*/   //标记2，标记1,2，两行样式二选一都是有效果的
			   text-align:justify;
			 }
			 p{
			 	line-height: 2em;
			 }
		</style>
	</head>
	<body>
		<div class="wrap">  
			 <div class="ele">
			 <p> 做法有些像手抓饭。

                         味道很好，该说是这个稻花香大米好吃。

                         尤其是米饭焖进菜锅里面，慢慢飘出的米香和菜香。

                         这样的饭菜一锅出适合懒人，适合不会做饭的人。

                         再打个鸡蛋汤，一顿饭也就打发了。</p>
			 </div>
		</div>
	</body>

这个问题可能会在面试中被问到。那种将行高设置成元素高度的方法只能解决单行文本垂直居中。

其它方法：这里有很多方法，随便看！

ylzsmallsun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css多行文本的垂直居中方法

html,body{ width: 100%; height: 100%; } .wrap{ display: flex; width:400px; height: 500px; background-color: yellow; align-items: center; //标记1 } .ele{
复制链接

扫一扫

专栏目录