垂直對齊文本和圖像

我知道這是重複的，但遺憾的是在其他帖子上給出的解決方案似乎不適合我或我沒有正確得到它們。垂直對齊文本和圖像

我需要將文本和圖像垂直對齊到中間。嘗試CSS屬性vertical-align：中看起來好像不行。我的代碼在JSFiddle，並給出如下

<div class="picacollinvitecoll"> 
    <span>Other Collaborators:</span> 
    <img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" /> 
    <img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" /> 
    <img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" /> 
</div>

CSS屬性

.picacollinvitecoll span{ 
    margin:0; 
} 
.picacollinvitecoll img{ 
    margin-top: 3px; 
}

我得到的輸出上JSFiddle，這是底部對齊，如圖所示。有人可以請更新JSFiddle使其在「中間」對齊。

來源

2012-09-05 Kapil Sharma

檢查這個帖子[vertical align img]， [1]：http://stackoverflow.com/questions/5021676/vertical-align-img-and-text-within-li – NoNaMe

@Kapil Sharma你想要圖像是否相對於文本對齊或整個相對於容器對齊？ – lpd

是的，我想讓它們相對一致。得到了答案。感謝（+1）給大家及時的幫助。 –

您正在尋找CSS vertical-align:middle

See here

來源

2012-09-05 07:16:12

試試這個代碼到你的CSS：

.picacollinvitecoll img{ 
    margin-top:-3px; 
    vertical-align:middle; 
    padding-top:2px; 
}

來源

2012-09-05 07:17:50

-1

這裏是另一種方式來做到這一點。使用圖像的align屬性，在這裏被更新小提琴

http://jsfiddle.net/zcaT3/7/

來源

2012-09-05 07:18:32 Carlos

''的align屬性不僅折舊，而且在HTML5中實際已過時。 – lpd

您需要添加vertical-align: middle;到這兩個選擇（如果我理解正確）

http://jsfiddle.net/Kyle_Sevenoaks/mbhLN/

來源

2012-09-05 07:18:44 Kyle

使用display:table父div

點擊此處查看演示http://jsfiddle.net/zcaT3/10/

來源

2012-09-05 07:20:18 Sowmya

垂直對齊文本和圖像

回答

相關問題