html - 如何将多个div中的文本垂直居中

Question

在过去的几个小时里，我一直在努力从左列切换到右列。我的意思是，我试图将灰色 div 内的文本 div 垂直居中。

我很想得到你的一些帮助。我已经阅读了很多教程和论坛答案，但还没有得到预期的结果。

任何建议都非常受欢迎:)

HTML 代码:

.box-key-message{
    height: 240px;
    position: relative;
    background-color: #eeeeee;
    border-radius: 10px;
}

.box-key-message div {
    display:inline-block;
    vertical-align:middle;
    padding: 20px;
    text-align: justify;
}

.box-key-message span {
    font-weight:bold;
    font-size:16px;
    color: #D5420F;
}

  <div class="col-lg-4 col-lg-offset-1">
    <div class="box-key-message">
    <div>
      <span> Gratuit</span>
      <br /><br />
        Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
      <br /><br />
        Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
    </div>
    </div>

    <br /><br />

    <div class="box-key-message">
    <div>
    <span>Simple et Rapide</span>
      <br /><br />
    Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
      <br /><br />
    Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
    </div>
    </div>
    <br /><br />

    <div class="box-key-message">
    <div>
    <span>Sans engagement</span>
      <br /><br />
    Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
      <br /><br />
    Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
    </div>
    </div>
    <br /><br />

    <div class="box-key-message">
    <div>
    <span>Et pour payer l’étudiant ?</span>
      <br /><br />
    L’étudiant vous facturera la prestation en direct à la fin de la mission.
    </div>
    </div>

  </div>

Answer 1

您可以将内部 div 用作表格单元格，然后对其进行垂直对齐。

我还改进了你的 HTML，与其使用两个换行符，不如使用段落或边距。

<div class="col-lg-4 col-lg-offset-1">
    <div class="box-key-message">
        <div>
            <span> Gratuit</span>
            <p>Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.</p>
            <p>Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !</p>
        </div>
    </div>
    <div class="box-key-message">
        <div>
            <span>Simple et Rapide</span>
            <p>Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.</p>
            <p>Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.</p>
        </div>
    </div>
    <div class="box-key-message">
        <div>
            <span>Sans engagement</span>
            <p>Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.</p>
            <p>Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.</p>
        </div>
    </div>
    <div class="box-key-message">
        <div>
            <span>Et pour payer l’étudiant ?</span>
            <p>L’étudiant vous facturera la prestation en direct à la fin de la mission.</p>
        </div>
    </div>
</div>

.box-key-message {
    height: 240px;
    background-color: #eeeeee;
    border-radius: 10px;
    margin-bottom: 2em;
    display: table;
}
.box-key-message div {
    display: table-cell;
    vertical-align:middle;
    padding: 20px;
    text-align: justify;
}
.box-key-message span {
    font-weight:bold;
    font-size:16px;
    color: #D5420F;
}

DEMO