how to vertically align text next to a floated image? - css

Question

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

Answer 1

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

Answer 2

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/

Answer 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.

Answer 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

Answer 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

Answer 6

You could do the following:
div:after {
content:"";
clear:both;
display:block;
}

Answer 7

float the picture
set a height to picture.
put a div1>div2>text after the picture.
set div1 the same height as the picture.
set div2 position relative, top 0 and transform translateY -50.
https://codepen.io/aungthihaaung/pen/ExXGvGy
.picture {
height: 300px;
float: left;
}
.div1 {
height: 300px;
}
.div2 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<img src="https://via.placeholder.com/300" class="picture" />
<div class="div1">
<div class="div2">
<h1>Hi There!</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, deleniti
perferendis! Ut, eaque iste incidunt atque perferendis odio laborum
nobis obcaecati exercitationem molestiae nihil est recusandae
mollitia. Fuga beatae inventore, adipisci ipsa aliquid corporis harum
ex tenetur iure assumenda optio quod eaque omnis porro ab consequuntur
unde a totam minima.
</div>
</div>