3

I'm trying to vertically center some text besides two image links. I've done this dozens of times before but for some reason it isn't working right now.

Here's the code: http://jsfiddle.net/KRWNw/

<style type="text/css">
#social-icons {
    height:32px;
    line-height:32px;
}​
</style>

<div id="social-icons">
    Connect:
    <a href="#">
        <img src="http://mydomain.com/rodi/images/facebook.png" width="32" height="32" />
    </a>
    <a href="#">
        <img src="http://mydomain.com/rodi/images/youtube.png" width="32" height="32" />
    </a>
 </div>​

If I take the images out the text aligns perfectly, but with the images in it won't align.

What am I doing wrong??

Thank you!

Danny Cooper
  • 355
  • 1
  • 8
  • 25

3 Answers3

3

One thing that is missing is the vertical-align: middle; that will only get you half way. The other issue is your inline images. If you float the images left or right, it will align correctly.

http://jsfiddle.net/tU4x7/

images are left of the content in this example, but you can float the text as well if you wrap it in a span. There are other solutions to achieve the same thing though.

Mark
  • 5,680
  • 2
  • 25
  • 26
  • Thank you, this works but floating isn't as flexible for me as the `vertical-align:middle;` solution. Is there any reason I should use this method instead? – Danny Cooper Sep 29 '12 at 02:16
  • 1
    @DannyCooper no both methods work. If you can avoid using a float, that is the better option. – Mark Sep 29 '12 at 02:17
2
img{
 vertical-align:middle;
}

use this css.

DEMO

Mangala Edirisinghe
  • 1,111
  • 2
  • 15
  • 32
0
img{vertical-align:middle;}

But I wouldn't use it like that, since the icons isn't a real part of your page or content. Consider to use the img as an background image instead. There is a great CSS framework for this

Simon
  • 120
  • 8