您的位置：首页 > Web前端 > CSS

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

2015-10-29 17:59 573 查看

<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>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航