如何在多个div中垂直居中文本

I've been trying hard for the past hours to switch from the left column to the right one. I mean, I'm trying to center vertically the text div inside the grey div.

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

I would love to get some of your help. I've read a lot of tutorials and forum answer but didn't get the expected result yet.

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

Any advice is more than welcome :)

任何建议都非常欢迎:)

HTML Code :

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>

3 个解决方案

#1

Just use display: table; table-layout: fixed; for the parent div and display: table-cell; vertical-align: middle; for every child. See how it works below. You probably also will need to specify width: 100% to both of them.

只需使用display:table; table-layout:fixed;为父div和显示:table-cell; vertical-align:middle;为每个孩子。看看它如何在下面工作。您可能还需要指定宽度:100%。

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

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

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

#2

You could use the inner div as a table-cell, then vertical-align works on it.

您可以将内部div用作表格单元格,然后使用vertical-align。

I also improved your HTML, instead of using two line breaks, it's better to use paragraphs or margin.

我也改进了你的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

#3

You can use display: table; width:100%; on .box-key-message, and display: table-cell on the div within it in. You want to use the table css hack because tables support vertical-align: middle while regular divs do not.

你可以使用display:table;宽度:100%;在.box-key-message上,并在其中的div上显示:table-cell。你想使用表css hack,因为表支持vertical-align:middle而常规div不支持。

HTML:

<div class="row">
    <div class="col-lg-4 col-lg-offset-1">
        <div class="box-key-message">
            <div>
                <p><strong> Gratuit</strong></p>
                <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>
                <p><strong>Simple et Rapide</strong></p>
                <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>
            <p><strong>Sans engagement</strong></p>
            <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>
            <p><strong>Et pour payer l’étudiant ?</strong></p>
            <p>L’étudiant vous facturera la prestation en direct à la fin de la mission.</p>
        </div>
    </div>
  </div>
</div>

CSS:

.box-key-message{
        height: 240px;
        display:table;
        background-color: #eeeeee;
        border-radius: 10px;
        margin-bottom: 20px;    
        width: 100%;
}

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

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

As a sidenote, you overused break tags a little too much. You can get the spacing you want for the content inside the .box-key-message divs by using paragraph tags around your content. To separate out the box-key-message blocks so they won't touch each other, you can add a margin-bottom: 20px; (or whatever spacing you prefer) to .box-key-message in your css.

作为旁注,你过度使用了断点标签。您可以使用内容周围的段落标记来获取.box-key-message div中内容所需的间距。要将盒密钥消息块分开以使它们不会相互接触,您可以添加一个margin-bottom:20px; (或者您喜欢的任何间距)到您的CSS中的.box-key-message。

See this codepen for an example.

请参阅此codepen以获取示例。