Clever Geek Handbook

How to center vertically text in multiple divs

In recent hours I have tried to switch from the left column to the right one. I mean, I'm trying to center vertically a div text inside a gray div.

I would like some help. I have read a lot of tutorials and answers on the forum but haven't got the expected result yet.

Any advice is more than welcome :)

Present problem and expected result HTML code:

.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>
Run codeHide result


+3


source to share


3 answers


Just use display: table; table-layout: fixed;

for the parent div and display: table-cell; vertical-align: middle;

for each child. See how it works below. You will probably need to specify width: 100%

for both of these as well.



.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>
Run codeHide result


+2


source


You can use the inner div as a table cell, then it will be vertically aligned on it.

I also improved your HTML, instead of using two line breaks it is better to use paragraphs or margins.

<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


source


You can use display: table; width:100%;

in .box-key-message

and display: table-cell

on divs inside it. You want to use a table css hack because tables support vertical-align: middle

, while regular divs don't.

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 side element, you have overused your tags too much. You can get the spacing you want for the content inside the div .box-key-message

by using paragraph tags around your content. To highlight the box-key-message blocks so they don't touch each other, you can add margin-bottom: 20px;

(or any other spacing) to .box-key-message in your css.

See the codepen example for an example.

+1


source






More articles:


All Articles