cách căn chỉnh văn bản theo chiều dọc bên cạnh hình ảnh nổi?

Question

Tôi muốn căn chỉnh theo chiều dọc một khoảng sau một hình ảnh nổi. Tôi đã tìm kiếm nó trong ngăn xếp tràn và tìm this post. nhưng hình ảnh của tôi được thả nổi.

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

Tôi tặng vertical-align:middle cho hình ảnh và không có gì thay đổi!

Cảm ơn

Answer 1

Trước tiên, hãy xóa float khỏi nó. Viết như thế này:

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

Kiểm tra này http://jsfiddle.net/ws3Uf/

Answer 2

Một <span> là một yếu tố nội tuyến, thử thêm display:block đến khoảng, cung cấp cho nó cùng một chiều cao như hình ảnh và chiều cao dòng để phù hợp. Float nó còn lại là tốt. Điều đó sẽ hoạt động

Answer 3

Bạn có thể tự thay đổi cũng

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

Demo

Hoặc bạn có thể sử dụng một table

Answer 4

Thêm line-height (tương đương để hình dung chiều cao):

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

See example.

Answer 5

Bạn có thể làm như sau:

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

Answer 6

Mặc dù đây là một bài rất cũ, bạn có thể đạt được điều này bằng 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