0

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.

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

----------- After SpaceBeers & Garrett comments ---------------------

I've tried all the suggestions, but it seams like none of them is working...

@SpaceBeers, as you can see in the photo bellow, there's an issue with your suggestions. It seams that, due to bootstrap, the line "top: 50%;" is not taken into account.

enter image description here @Garrett, your help did something different, but I couldn't solve the issue yet. :S

I now think it's an issue due to Bootstrap, as it is what I'm using with :

Francky
  • 205
  • 1
  • 10
  • you may already find your answer here: [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – jbutler483 May 08 '15 at 15:39

2 Answers2

0

You can vertical align anything very easily these days.

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
0

I am not sure if it's proper answer, but I can't put it in comment because I don't have enough reputation so please don't give me -1 vote.

Have you tried removing dot "." before div in css?

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

change into:

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

Because div isn't class. It worked for me, but I can't see in your code container div, so I am not sure.

Also take a look at this site. It can be very useful, because as you can see this feature in CSS is really broken.

Hope it will help. :)

Garrett
  • 367
  • 1
  • 14