在開發中會遇到很多list組件，例如左邊一個img，右邊是內容介紹。
內容介紹的最上部往往是內容的標題，標題在進行省略ellipsis設置時，需要考慮產品需求：
比如我在項目中，設計希望兩行充滿高度，一行則垂直居中。

實現截圖如下：

解決辦法：

1、flex實現（需要注意ios8等系統的兼容性）

html

<div class="hd"><span>北京北京博泰酒店北京博泰酒店</span></div> <br> <div class="hd"><span>北京</span></div>

css

.hd {width: 100px;height: 54px;display: flex;/* 左右居中 *//* align-items: center; *//* 上下居中 */justify-content: center;flex-direction: column;background-color: red; } span {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 18px;color: #333; }

2、line-height與vertical-align共同實現

html

<div class="box"><div class="content">我是多多多多多多多多多多多多多多多行文本</div></div>

css

.box {line-height: 200px;}.content {display: inline-block;line-height: 20px;vertical-align: middle;}

注解：
1、inline-block產生一個“行框盒子”，附帶“幽靈空白節點”，使得外部的line-height起作用；
2、內聯元素默認基線對齊，通過vertical-align調整多行文本垂直位置。

代碼參照《CSS世界》

總結

以上是生活随笔為你收集整理的列表标题一/两行垂直居中展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。