css多行文本垂直居中
阿新 • • 發佈：2017-08-12
-c get add class alt form ati ble col
今天需要將文本垂直居中，就是一行是垂直居中，多行也是垂直居中。
效果如下
實現代碼（同事提供）
<!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多行文本垂直居中