How to align vertically divs?

Question

Could you help me align vertically (on blue background) text and icons (fb, etc) ? I tried to use vertical-align, display:table, etc. But it didn't solve my problem.

http://tinyurl.com/pe4avff

Please help me. Thanks!

Answer 1

You probably didn't use display and vertical-align properties in the right way.

Use the following styles:

.align {
    display: table;
    height: 100%;
    ...
}

.vertical {
    display: table-cell;
    vertical-align: middle;
}

Also notice that this is a common practice for vertical alignment, but not the only one.

Answer 2

You could also do:

.vertical {
display: table-row;
line-height: 2em;
}

Which is basically setting line-height of the text in your div to the same value as your divs height.

Answer 3

从CSS类bar-menu-left，bar-menu-right和bar-icons中删除float：left。

Answer 4

If what you want to do is to vertically align all text and icons you should remove

float:left; from the .bar-menu-left , .bar-menu-right and .bar-icons classes.