Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can text be aligned vertically against an image?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24532
    nickcharlton
    Member

    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

    #55978
    apostrophe
    Participant

    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.

    #55979
    nickcharlton
    Member

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

    Thanks,

    Nick

    #56084
    Chris Coyier
    Keymaster

    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)
  • The forum ‘CSS’ is closed to new topics and replies.