CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
komon
komon

Reputation: 3

How to align vertically divs?

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!

Upvotes: 0

Views: 71

Answers (4)

Diego Ponce
Diego Ponce

Reputation: 1

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.

Upvotes: 0

Seifeddine Dridi
Seifeddine Dridi

Reputation: 1

Remove float: left from CSS classes bar-menu-left, bar-menu-right and bar-icons.

Upvotes: 0

MikeWu
MikeWu

Reputation: 3702

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.

Upvotes: 1

Lorenzo Marcon
Lorenzo Marcon

Reputation: 8169

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.

Upvotes: 2

Related Questions