Vertically Center Inline Image

  • # October 28, 2010 at 5:22 pm

    Maybe I’m missing something simple, but I can’t seem to find a good way to vertically center an inline image with the rest of the line.

    Take this code for example:

    This is a regular line of text with a textbox: and maybe a link with an image in it: . And maybe there's a little more text after.

    The bottom/baseline of the image lines up with the baseline of the text, as if the image was “sitting” on the same surface as the text itself. I would like the vertical center of the image to match the vertical center of the text (i.e., the middle between the text’s baseline and it’s “text-top”).

    It seems like I’ve seen this solution somewhere before, but I’m coming up short finding it again. Any thoughts?

    # October 28, 2010 at 6:20 pm

    They invented vertical-align for that.
    Use it like this in your CSS:

    img { vertical-align:middle; }
    # October 28, 2010 at 8:04 pm

    Yes, I’m well aware of vertical-align, but unfortunately it doesn’t actually center it. Sure, it’s centered based on the line’s x-height, but that’s almost always a couple of pixels off. Try it, you’ll see what I’m talking about.

    # October 29, 2010 at 8:17 am

    I usually use vertical-align: middle;, then position: relative; and top or bottom to adjust it whatever few pixels need jacking.

    # December 10, 2012 at 7:17 pm

    Vertical-align: middle; works on inline elements. We had to use a negative margin:top.

    # December 17, 2012 at 6:48 am

    use display :table property

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed