CSS多行文本垂直居中
生活随笔
收集整理的這篇文章主要介紹了
CSS多行文本垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天需要將文本垂直居中，就是一行是垂直居中，多行也是垂直居中。
效果如下
實現代碼（同事提供）
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.listDiv{display: flex;width: 300px;height: 60px;padding: 10px;background: #ccc;margin-bottom: 10px;}.listDivLeft{flex:1;height: 60px;overflow: hidden;}.listDivLeft span{display: table-cell;height: 60px;line-height: 30px;;vertical-align: middle;text-decoration: none;}.listDivRight{padding-left: 10px;}.listDivRight img{width: 60px;height: 60px;}</style> </head> <body><div class="listDiv"><div class="listDivLeft"><span>我是一條很長很長的文字，不信你看，哎呦，還是真是，玩不了叻。</span></div><div class="listDivRight"><img src="http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/></div></div><div class="listDiv"><div class="listDivLeft"><span>我就只一行，沒有了。</span></div><div class="listDivRight"><img src="http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/></div></div> </body> </html>演示地址
http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/multi-row-text-middle.html
總結
以上是生活随笔為你收集整理的CSS多行文本垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（番外篇）——python批量转
- 下一篇： [转]你所不知的 CSS ::befor