How to best vertically center an image and some text inside a div?

Adding this to your style should do it: . Key * { vertical-align: middle; } You're basically saying "every element inside the key class element needs to be vertically centered". This is the markup I follow (usually a .

Button class) and works in IE, Chrome, FF, Safari.

There are a number of options (see Vertical Centering with CSS for the complete rundown). Which one is best depends on a number of factors, the biggest being whether you know the dimensions of your content or not. If you're just wanting to center the text in relation to the image, setting the text's line-height to the height of the image/container may be the easiest approach...

Line-height does not work consistently among browser engines for vertically centering. I usually get text that is a pixel too low in Webkit and several pixels too high in Gecko. So I opt for explicit heights with a relative position (50%) and negative top margin (half the height), usually on the text's parent anchor.

If it's anchor-less a span is then required, sadly. – jonwd7 Jan 21 '10 at 18:23.

If the container DIV and Image both have fixed width and height then you could use CSS, but if not, jQuery Center Plugin is by far the best solution.

The following CSS will work: . Key img { vertical-align: middle; } Hope this helps! :-).

All images inside the key class will be vertically aligned. – The Elite Gentleman Jan 21 '10 at 19:00.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions