css - Bagaimana untuk memusatkan teks satu baris dan berbilang baris

Question

Seperti yang ditunjukkan dalam gambar,

Apabila hanya terdapat satu baris teks, teks berpusat secara menegak Apabila terdapat dua baris teks, teks juga berpusat secara menegak.

PS: Tak perlu lentur.

Answer 1

Lihat rendering dahulu

Kemudian pelaksanaan kod

<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

Berdasarkan reka letak anda, ia sepatutnya kelihatan seperti ini: teks di sebelah kiri dan masa di sebelah kanan kedua-duanya berpusat menegak.
Kaedah mudah ialah:
susun atur:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css;{}paparan:{}
span{display: table-cell; vertical-align: middle;}

Boleh cuba

Answer 3

Mengandungi pelbagai penyelesaian dan portal

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

Mengikut gambar yang anda berikan, setiap bahagian kandungan mempunyai ketinggian tetap, jadi tetapkan ketinggian garisan elemen induk paling luar sama dengan paparan tag p dalam ketinggiannya sendiri: sebaris-blok: tengah ; Struktur kod

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

Answer 8

Anda boleh lihat kaedah yang saya ringkaskan ini. Portal
Apa yang subjek perlukan ialah kaedah untuk memusatkan teks berbilang baris secara menegak. Artikel yang saya ringkaskan mengandungi kaedah biasa untuk mencapai ini.
http://codepen.io/zengkan0703...
Saya tertanya-tanya adakah penyoal yang tidak menyukai jawapan saya? Jika ya, saya harap saya boleh dijawab mengapa. Jika tidak, contoh di atas sepatutnya menyelesaikan keperluan anda.