標籤：size cal css 多行 splay code ica text http
今天需要將文本垂直置中，就是一行是垂直置中，多行也是垂直置中。
效果如下
實現代碼（同事提供）
<!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多行文本垂直置中
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
