1

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

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

4

5 回答 5

3

你正在寻找 CSSvertical-align:middle

看这里

于 2012-09-05T07:16:12.217 回答
3

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

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

于 2012-09-05T07:18:44.320 回答
2

用于display:table父 div

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

于 2012-09-05T07:20:18.230 回答
1

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

.picacollinvitecoll img{
    margin-top:-3px;
    vertical-align:middle; 
    padding-top:2px;
}​
于 2012-09-05T07:17:50.303 回答
-1

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

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

于 2012-09-05T07:18:32.387 回答