css - 如何實現單行與多行文字的居中

Question

如圖所示，

當本行只有一行時，文字垂直居中， 當有兩行文字時，同​​樣使文字垂直居中，如何做到呢？

PS: 不用flex.

Answer 1

先看效果圖

然後是程式碼實作

<style>
    .message-box{
        width: 500px;
        height: 500px;
        background: #333;
    }
    .message-item{
        background: #666;
        padding: 20px;
        width: 100%;
        height: 100px;
        display: table;
        box-sizing: border-box;
    }
    .item-title{
        width: 60%;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
    }
    .item-time{
        width: 40%;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
        text-align: right;
    }
</style>
<p class="message-box">
    <p class="message-item">
        <p class="item-title">课程下单成功</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
    <p class="message-item">
        <p class="item-title">您报名的活动即将开始【作品集日-一起来看展】</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
</p>

Answer 2

從你的佈局來看，應該是這樣的:左邊的文字與右邊時間都垂直居中。
一個簡單的方法就是：如
佈局：

gfghghg2017-12

css：
p{display: table;}
span {display: table-cell; vertical-align: middle;}

可以試試

Answer 3

包含了各種解決方案，傳送門

Answer 4

雷雷

Answer 5

雷雷

Answer 6

雷雷 雷雷

Answer 7

根據你提供的圖來看，每一條內容都是定高的，所以設定最外層父元素line-height等於自身高度裡面的p標籤display：inline-block；vertical-align: middle;
程式碼結構

<ul>
    <li>
        <p></p><span></span>
    </li>
    <li>
        <p></p><span></span>
    </li>
    <li>
        <p></p><span></span>
    </li>
</ul>

Answer 8

可以看下我總結的這些方法。傳送門
題主需要的就是多行文字垂直居中的方法吧。我總結的文章裡面有典型的方法可以實現，例子如下。
http://codepen.io/zengkan0703...
不知道是題主踩的我的答案嗎？如果是，我希望能回答我為什麼。如果不是，上面的例子應該可以解決你的需求。