如何垂直對齊浮動圖像旁邊的文本？

我想在浮動圖像後垂直對齊跨度。我在堆棧溢出中搜索它並找到this post。但我的形象是浮動的。如何垂直對齊浮動圖像旁邊的文本？

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

我給vertical-align:middle圖像，沒有任何改變！

由於

來源

2012-05-09 Mosijava

好吧，它似乎改變，如果你給'vertical-align：middle'圖像。我在Chrome上測試過它。 – petrichor

您已經在'height'和'float'之間忘記''''''''''img'。 – Maehler

@McFjodor謝謝，我編輯它 – Mosijava

首先從它刪除float。像這樣寫：

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

入住這http://jsfiddle.net/ws3Uf/

來源

2012-05-09 12:40:56 sandeep

我使用你的方法，我從我的圖像中刪除我的浮動。但是當我把''的內容改成長2行的東西時，第二行就會到圖像的底部最後，我在''上添加了'display：inline-block'，它起作用了！謝謝 – Mosijava

@Mosijava - 使用內聯塊對我不起作用 - 它只是將所有內容放在下一行。你有這樣的例子嗎？ – Nick

如果文字足夠長以至於需要多行，則這與「float」效果不同。 http://jsfiddle.net/9667cqun/ –

甲<span>是內嵌元素，嘗試添加display:block到跨度，給它相同的高度的圖像和線高度相匹配。將它也浮起來。這應該工作

來源

2012-05-09 12:40:16 atmd

它不適用於我 – Mosijava

真的嗎？，檢查出http://jsbin.com/owiyuc/edit#html,live – atmd

您可以手動更改以及

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

Demo

或者你可以使用一個table

來源

2012-05-09 12:41:33

添加line-height（等於以圖片的高度）：

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

See example.

來源

2012-05-09 12:46:04 ScottS

如果跨度有2條線長怎麼辦？ – Mosijava

@ Mosijava - 此解決方案僅適用於單行文本。我很高興sandeep的解決方案爲你工作（你顯然不需要像你的標題建議的圖像'浮動'）。 – ScottS

你可以做到以下幾點：

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

來源

2013-11-07 18:57:01

即使這是一個非常老的帖子，你可以做到這一點使用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

來源

2016-07-03 10:19:18

如何垂直對齊浮動圖像旁邊的文本？

回答

相關問題