how to vertically align text next to a floated image?

问题

I want to vertically align a span after a floated image. I searched for it in stack overflow and find this post. but my image is floated.

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

I give vertical-align:middle to image and nothing change!

Thanks

回答1:

First remove float from it. Write like this:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

Check this http://jsfiddle.net/ws3Uf/

回答2:

Even though this is an extremely old post, you can achieve this using Flexbox:

div {
 display: flex;
 align-items: center;
}

<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

JsFiddle example

回答3:

Add line-height (equal to picture height):

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

See example.

回答4:

You can manually change as well

<div>
    <img style="width:30px;height:30px float:left">
    <span style="float:left;padding-top:15px;">Will work.</span>
</div>

Demo

Or you can use a table

回答5:

A <span> is an inline element, try adding display:block to the span, give it the same height as the image and a line height to match. Float it left as well. That should work

回答6:

You could do the following:

  div:after {
        content:"";
        clear:both;
        display:block;
    }

来源：https://stackoverflow.com/questions/10516157/how-to-vertically-align-text-next-to-a-floated-image

标签

css

css-float

vertical-alignment