在div中垂直对齐图像和文本

Question

Is the only way of aligning images and text vertically within a div possible via absolute/relative positioning?

I need to do that, and I am trying to use as few classes/hacks as possible.

Is the only other way to do like display:table-cell; vertical-align:middle;?

Example code:

http://jsfiddle.net/ndreckshage/UYxXG/

Answer 1

One way to do this is to use display: table-cell with vertical-align: middle .

See an example:

http://jsfiddle.net/UYxXG/3/

One problem with this method is, is that the property "table-cell" is not supported by IE7.

Answer 2

Posted above in comment, but this code works for anyone else who is interested --->

http://jsfiddle.net/ndreckshage/7SV9f/

Answer 3

Vertical align is one way, absolute/relative positioning is another, but there is also the html align attribute. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align

In my opinion adding to your css with vertical-align is the smartest way.

.test
vertical-align: middle;

Answer 4

Chris Coyier has a great article on CSS Tricks that shows how to center single and multiline text vertically with css. http://css-tricks.com/vertically-center-multi-lined-text/