垂直对齐文本和图像答案

【问题标题】：Vertically align text and image垂直对齐文本和图像
【发布时间】：2012-09-05 15:20:18
【问题描述】：

我知道这是重复的，但很抱歉，因为其他帖子中给出的解决方案似乎对我不起作用，或者我没有正确理解它们。

我需要将文本和图像垂直对齐到中间。尝试过 CSS 属性 vertical-align:middle 但似乎不起作用。我的代码在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 以使其在“中间”对齐。

【问题讨论】：

查看这篇文章 [vertical align img], [1]: stackoverflow.com/questions/5021676/…
@Kapil Sharma 您希望图像相对于文本对齐还是整个区域相对于容器对齐？
是的，我希望它们相对对齐。得到答案。感谢 (+1) 所有人的及时帮助。

标签： html css vertical-alignment

【解决方案1】：

您正在寻找 CSS vertical-align:middle

See here

【讨论】：

【解决方案2】：

您需要将vertical-align: middle; 添加到两个选择器（如果我理解正确的话）

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

【讨论】：

【解决方案3】：

使用display:table作为父级div

在这里查看演示http://jsfiddle.net/zcaT3/10/

【讨论】：

【解决方案4】：

在你的 css 中试试这个代码：

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

【讨论】：

【解决方案5】：

这是另一种方法。使用图像的对齐属性，这里是更新的小提琴

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

【讨论】：

<img> 的 align 属性在 HTML5 中不仅被贬值而且实际上已经过时了。