最后一节实践课当中多行文字垂直居中如何实现？
来源：-
sylkl
2016-01-20 15:12
我按视频弄出来是这样的，求大神指导。。。怎样才能多行文字垂直居中呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字图片垂直居中</title>
<style>
.div1{
background: #0093D5;
height: 200px;
}
.div1 span{
display: inline-block;
vertical-align: middle;
}
.div1 i{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="div1">
<span>
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
</span>
<i></i>
</div>
</body>
</html>
写回答
关注
1回答
-
- zcyeee
- 2016-04-08 15:27:30
把.div1 span随便设置个宽度就OK了，因为文字多了达到了容器的100%宽度（或者把span的宽度设置为100%）都不会垂直居中
CSS深入理解之vertical-align
深入理解vertical-align的属性值，分享开发中应用经验
39337 学习 · 57 问题
相似问题