Vertical-align does not align <li>’s

Asked

Viewed 108 times

2

Guys, I have a problem using vertical align. Mine <li> from the initial menu is 80px high and set to be aligned in half. Only it does not work, Ué.

http://jsfiddle.net/rhbogwx7/

css vertical-align

3 answers

1

Change the display of .headercontainer li for table-Cell.

.headercontainer li{
    display:table-cell;
    height:inherit;
    vertical-align:middle;
}

Example: http://jsfiddle.net/rhbogwx7/3/

  • Why? Explanations?

  • 1

    This makes the element behave as if it were a table cell, enabling the alignments.

1

Suggestion:

.headercontainer li {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

The transform: translateY(-50%); is to correct the position, otherwise it would be 50% + element height.

jsFiddle: http://jsfiddle.net/qz1oc8xs/

  • Using CSS3 for a simple problem wouldn’t be gambiarra?

  • 1

    @Brunoaugusto CSS3 is the future. The answer will be more and more valid with time :P And besides there are other suggestions :)

  • 1

    Is that true there

0

  • That way he’s not using the vertical-align;

Browser other questions tagged css vertical-align

You are not signed in. Login or sign up in order to post.