css – So zentrieren Sie einzeiligen und mehrzeiligen Text

Question

Wie im Bild gezeigt,

Wenn nur eine Textzeile vorhanden ist, wird der Text vertikal zentriert. Wenn zwei Textzeilen vorhanden sind, wird der Text ebenfalls vertikal zentriert.

PS: Keine Notwendigkeit, sich zu beugen.

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

从你的布局来看，应该是这样的:左边的文字与右边时间都垂直居中。
一个简单的方法就是：如
布局：<p><span>gfghghg</span><span>2017-12<s/pan></p>
css：
p{display: table;}
span{display: table-cell; vertical-align: middle;}

可以试下

Answer 3

包含了各种解决方案，传送门

Answer 4

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

Answer 5

<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>

Answer 6

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

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

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...
不知道是题主踩的我的答案吗？如果是，我希望能回答我为什么。如果不是，上面的例子应该能解决你的需求。