Question

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

我需要将文本和图像垂直对齐到中间。试过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以使其在'中间'对齐。

Answer 1

您正在寻找CSS vertical-align:middle

See here

Answer 2

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

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

Answer 3

将display:table用于父div

在此处查看演示http://jsfiddle.net/zcaT3/10/

Answer 4

在css中尝试使用此代码：

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

Answer 5

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

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

垂直对齐文本和图像

5 个答案: