CODEWITHSUNDEEP
htmlcss
Rod Johnson
Rod Johnson

Reputation: 2427

Vertical Alignment & Horizontal Alignment Issue

I am trying to create a layout like this, that is both horizontally and vertically centered.

alt text

I have figured out a way to do this with jQuery, but there seems to be a slight jerk as the page renders. I was hoping to do this layout with pure css, but I can't seem to figure out how to do it. Here is the fiddle for this layout. Thanks

http://jsfiddle.net/rodmjay/LnRq6/

Upvotes: 1

Views: 417

Answers (2)

Víctor Gómez
Víctor Gómez

Reputation: 1

I think that its impossible to align vertically this with pure css and without tables. You need that all elements have the same height for align them vertically.

UPDATE 2016: You can use display flex, its amazing for this

Upvotes: 0

Harmen
Harmen

Reputation: 22438

A combination of vertical align and display in your CSS will do the trick: 

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

Upvotes: 1

Related Questions