Aligning images with text

Question

I'm having trouble aligning an image with text. I want my image on the left, and the text inline on the right, centered vertically to the image.

<div class="container">
    <span class="icon">
        <img ... />
    </span>
    <span>555-1212</span>
</div>

Right now, the text hugs the top of the container. How can I center it vertically to the middle of the container?

score 4 · Answer 1 · answered Sep 10 '14 at 19:13

4

.container span {
    display: inline-block;
    vertical-align: middle;
}

This should do it. jsFiddle

answered Sep 10 '14 at 19:13

Stephan Muller

1

placekitten.com might be my new favorite prototyping resource. – Woodrow Barlow Sep 10 '14 at 19:20
Heh, I've been using that for years, love that site. Sometimes I use http://www.placecage.com/ when I get tired of kittens. – Stephan Muller Sep 10 '14 at 19:21
This doesn't actually work. Make the image smaller than the text or the text large than the image and you'll see it fail – gman Nov 19 '20 at 12:33

1 Answers1