css - Comment centrer un texte sur une seule ligne et sur plusieurs lignes

Question

Comme le montre l'image,

Lorsqu'il n'y a qu'une seule ligne de texte, le texte est centré verticalement. Lorsqu'il y a deux lignes de texte, le texte est également centré verticalement. Comment faire ?

PS : Pas besoin de fléchir.

Answer 1

Regardez d'abord les rendus

Ensuite, l'implémentation du code

<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

À en juger par votre mise en page, cela devrait ressembler à ceci : le texte à gauche et l'heure à droite sont tous deux centrés verticalement.
Une méthode simple est la suivante :
layout:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css :
p{display: table ;}
span{display : table-cell ; vertical-align : middle;}

Vous pouvez l'essayer

Answer 3

Contient diverses solutions et portails

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="affichage : tableau; hauteur : 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

Selon l'image que vous avez fournie, chaque élément de contenu a une hauteur fixe, alors définissez la hauteur de ligne de l'élément parent le plus à l'extérieur égale à l'affichage de la balise p dans sa propre hauteur : inline-block; vertical-align: middle; Structure du code

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

Answer 8

Vous pouvez jeter un œil à ces méthodes que j'ai résumées. Portail
Ce dont le sujet a besoin, c'est d'une méthode pour centrer verticalement un texte multiligne. L'article que j'ai résumé contient des méthodes typiques pour y parvenir. Les exemples sont les suivants.
http://codepen.io/zengkan0703...
Je me demande si c'est la personne qui a posé la question qui n'a pas aimé ma réponse ? Si c'est le cas, j'espère qu'on pourra me répondre pourquoi. Sinon, l'exemple ci-dessus devrait résoudre vos besoins.