国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

先看效果圖

然后是代碼實(shí)現(xiàn)

<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">您報(bào)名的活動(dòng)即將開(kāi)始【作品集日-一起來(lái)看展】</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
</p>

從你的布局來(lái)看，應(yīng)該是這樣的:左邊的文字與右邊時(shí)間都垂直居中。
一個(gè)簡(jiǎn)單的方法就是：如
布局：<p><span>gfghghg</span><span>2017-12<s/pan></p>
css：
p{display: table;}
span{display: table-cell; vertical-align: middle;}

可以試下

包含了各種解決方案，傳送門(mén)

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

<p class="" style="display: table;height: 100px;">

    <p class="" style="display: table-cell;vertical-align: middle;">
        sadfsadf
    </p>
    <p class="" style="display: table-cell;vertical-align: middle;">
        sadfsadf
    </p>
</p>

<p class="one">
    <p class="two>
        文字
    </p>
</p>

.one {
    position: relative;
    }
.two {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

根據(jù)你提供的圖來(lái)看，每一條內(nèi)容都是定高的，所以設(shè)置最外層父元素line-height等于自身高度 里面的p標(biāo)簽 display：inline-block；vertical-align: middle;
代碼結(jié)構(gòu)

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

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