Centering Vertically

There are several possilbities depending on the markup that is availiable.

1) Centering text in a block with fixed height

Solution: Use line-height with same height as the div.


2) Centering bullets in a list

Solution: use a background-image with background-position: left center (or 2px center).

Hint: If your image is a little to high, make the image a little taller with transparent pixels on the bottom (or vice versa).


3) Centering image and text in a div with fixed height

Solution: use vertical-align on the image.


4) Centering images with multiple elements in a grid.

Solution: work with float and line-height.