24

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

Community
  • 1
  • 1
Mosijava
  • 3,941
  • 3
  • 27
  • 39

7 Answers7

15

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

Styx
  • 9,863
  • 8
  • 43
  • 53
The Codesee
  • 3,714
  • 5
  • 38
  • 78
12

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/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 2
    I use your approach and I remove my float from my image. But when I change `` content to something that long 2 line, the second line goes to bottom of image At last, I add `display:inline-block` to `` and it works! Thank you – Mosijava May 09 '12 at 14:25
  • @Mosijava - Using inline-block did not work for me - it just puts everything on the next line. Do you have an example of this working? – Nick Apr 24 '13 at 22:01
  • 2
    This won't have the same effect as `float` if the text is long enough to need multiple lines. http://jsfiddle.net/9667cqun/ – Alec Jacobson Dec 09 '15 at 15:16
  • 1
    This works for images on the left side, but will not work for images floated to the right. – Keith Hughitt Mar 05 '16 at 01:46
  • 1
    when you have a long text it breaks in a really stupid way – user151496 Feb 27 '18 at 10:58
6

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.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • What if the span have 2 line long? – Mosijava May 09 '12 at 14:29
  • 1
    @Mosijava--this solution only works for a single line of text. I'm glad sandeep's solution worked for you (you obviously did not need the `float` on the image like your title suggested). – ScottS May 09 '12 at 15:35
1

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

The Codesee
  • 3,714
  • 5
  • 38
  • 78
atmd
  • 7,430
  • 2
  • 33
  • 64
1

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

huMpty duMpty
  • 14,346
  • 14
  • 60
  • 99
0

You could do the following: 

  div:after {
        content:"";
        clear:both;
        display:block;
    }
Franz Fahrenkrog Petermann
  • 159
  • 1
  • 2
0
  • 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>
Aung
  • 191
  • 1
  • 4