Grow your CSS skills. Land your dream job.

How can text be aligned vertically against an image?

  • # April 8, 2009 at 2:02 pm

    I have an image, and a text block after it. I would like to align this text so that it is in the "middle" (so that it is equal to the top and bottom) of the image, preferably without using other elements, so that it is completely reliant upon CSS.

    The same solution needs to be used within a <div> and a <button> element.

    Example: [img]http://h4xr.org/k8x7[/img]

    The "Add Sleep" text should appear centrally aligned towards the "plus" icon.

    Thanks,

    Nick

    # April 8, 2009 at 2:26 pm

    Wrap your text in a span and use the image as its background with a bit of left padding.

    Code:
    Add Sleep

    and the CSS:

    Code:
    .sleep {
    background: url(path_to_your_image/image.png) no-repeat scroll left center;
    padding:0 0 0 30px;
    }

    Adjust the padding to suit.

    # April 8, 2009 at 2:32 pm

    Thank you. Doing it as a background never came to mind.

    Thanks,

    Nick

    # April 10, 2009 at 10:36 am

    Very simple solution:

    Code:
    img { vertical-align: middle; }

    This is the exact purpose of the vertical-align. It works perfectly cross-browser assuming that the img element remains an inline element and it’s in a row of other inline elements.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".