css - 如何实现单行与多行文字的居中

问题描述

问 题

如图所示，

当本行只有一行时，文字垂直居中， 当有两行文字时，同样使文字垂直居中，如何做到呢？

PS: 不用flex.

解决方案

先看效果图

然后是代码实现

<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>
<div class="message-box">
    <div class="message-item">
        <p class="item-title">课程下单成功</p>
        <p class="item-time">2017-02-01 10:30</p>
    </div>
    <div class="message-item">
        <p class="item-title">您报名的活动即将开始【作品集日-一起来看展】</p>
        <p class="item-time">2017-02-01 10:30</p>
    </div>
</div>

这篇关于css - 如何实现单行与多行文字的居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！