CODEWITHSUNDEEP
csshtml
ryantuck
ryantuck

Reputation: 6634

CSS - Vertical alignment of divs as list items

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;
}

Upvotes: 0

Views: 2818

Answers (1)

DaniP
DaniP

Reputation: 38252

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/

Upvotes: 2

Related Questions