0

I wanted to evenly distribute a few divs horizontally. So I found this link:

How do I distribute items horizontally with CSS?

which explained how to do it with an unordered list. That takes care of the horizontal distribution.

Now, when I add different text and styles of text to each of these divs, they do not vertically align with one another. It seems the bottoms of the last lines of text within each div align with eachother, instead of the last line of the div.

Here's my fiddle: http://jsfiddle.net/3jxV7/1/

How can I just get the divs to vertically align with one another, no matter what content I include within those divs?

To make it easy, assume all my divs have the same dimensions:

div.foo
{
    width:100px;
    height:100px;
    background:cyan;
}
1
  • 1
    Why don't float the divs?
    – user1598019
    Oct 30, 2013 at 15:50

1 Answer 1

2

Add this property in your CSS

li
 {
  vertical-align:middle;
 }

View the demo http://jsfiddle.net/3jxV7/2/

If you want the texts inside vertical aligned too then add this on your CSS

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

View the demo http://jsfiddle.net/3jxV7/4/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.