多行文字要想对齐使用line-height是实现不了的，他就等同于的让一个不设置宽高的div垂直居中，就像下面图这种效果。
<style>
.content{
width: 800px;
margin: 500px auto;
}
/* 定位写法 */
/* .box{
display: inline-block;
vertical-align: middle;
margin-left: 30px;
border-radius: 20px;
width: 200px;
height: 200px;
border: 1px solid #eee;
position:relative;
}
.text{
position: absolute;
top: 50%;
transform: translateY(-50%);
} */
/* table布局 */
/* .box{
margin-left: 30px;
border-radius: 20px;
width: 200px;
height: 200px;
border: 1px solid #eee;
display: table;
}
.text{
display: table-cell;
vertical-align: middle;
} */
/* flex布局 */
.content{
display: flex;
justify-content: space-around;
}
.box{
display: flex;
align-items: center;
border-radius: 20px;
width: 200px;
height: 200px;
border: 1px solid #eee;
}
</style>
<body>
<div class="content">
<div class="box">
<div class="text">这是一个很长很长的故事</div>
</div>
<div class="box">
<div class="text">这是一个很长很长的故事这是一个很长很长的故事这是一个很长很长的故事这是一个很长很长的故事</div>
</div>
<div class="box">
<div class="text">这是一个很长很长的故事这是一个很长很长的故事这是一个很长很长</div>
</div>
</div>
</body>
2701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
