vendredi 8 mai 2015

Vertically center a div in a Bootstrap Column

I've been trying yesterday to center vertically a "LinkedIn Connexion" div, with no success...

I've tried the "display: table" technique that I learned a few minutes ago but it still doesn't work... Can you help me find the issue ? I've learned Bootstrap last week and I've been having issues with all the "vertically centered" questions.``

Thanks in advance :)

.div[title="Connexion LinkedIn"] {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#linkedin-block {
    display: table-cell;
    vertical-align: middle;
    Background-color: #eceded;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}
  <div class="col-lg-4 col-lg-offset-2" title="Connexion LinkedIn">
   <div id="linkedin-block">
    <h4>Connectez-vous via LinkedIn</h4>
    <a href="<%= url_for connexion_linkedin_path %>"> <%= image_tag "linkedin.png", :style => "width:50px; margin:20px" %></a>
   </div>
  </div>

Aucun commentaire:

Enregistrer un commentaire