0

So I have an image "blah.jpg" and a name "Name" in HTML.

    <img src="blah.jpg"> Name

I want to make it so that the Name is center aligned with the center of the blah.jpg image instead of the text "Name" having a baseline at the bottom of the image.

What is the best way to accomplish this with no tables using CSS3 if possible?

Teivere
  • 317
  • 2
  • 4
  • 13
  • possible duplicate of [How do I vertical center text next to an image in html/css?](http://stackoverflow.com/questions/967022/how-do-i-vertical-center-text-next-to-an-image-in-html-css) – Marc B Sep 07 '11 at 21:13

3 Answers3

3

In the page:

<img src="blah.jpg" class="centered"> Name

In css file:

img.centered {vertical-align:middle;}

No need for display: inline-block (which is not supported in some old browsers)

Yoni Baciu
  • 2,667
  • 1
  • 22
  • 28
  • Well, technically images are inline, not inline-block, but in this case, you're correct, it's not necessary. – kinakuta Sep 07 '11 at 22:48
2

You can use vertical-align: middle on your img element: http://jsfiddle.net/Z35pw/ .

kinakuta
  • 9,029
  • 1
  • 39
  • 48
0

If you want a one-liner, without defining extra objects or attributes, simply add style="vertical-align:middle" inside the <img .../> tag.

luchonacho
  • 6,759
  • 4
  • 35
  • 52