使用<p>标记</p>进行居中问题

Question

我在img内有p和div。

我试图将p垂直居中。我尝试了line-height和其他一些事情。

这是它的样子

我希望“可爱的火狐恶作剧”相对于img

垂直居中

CSS

img{
    width: 50px;
    height: 50px;
}

li{
    list-style-type: none;
    text-decoration: none;
}

a{
    text-decoration: none;
}

li p{
    display: inline;
    color: black;
    font-size: 25px;
    margin:0;
}

DEMO fiddle

Answer 1

完成。

Updated jsFiddle

您所要做的就是将vertical-align:middle;添加到img。

img {
    vertical-align:middle;
}

Answer 2

将vertical-align:middle;添加到您的img规则中。有关工作示例，请参阅http://jsfiddle.net/hA9N2/4/。

Answer 3

我不确定为什么p已设置为inline;但是，由于img是内嵌标记，因此您可以使用vertical-align将其与其他inline内容对齐。

我继续将p再次设为block元素，将图像放入其中，并使图像垂直对齐。

JSFiddle here.

如果您想保留p inline，那么您真正需要做的就是将图片设置为垂直对齐，因为p设置为inline为好。

JSFiddle here.

Answer 4

试试这个， http://jsfiddle.net/gBNFK/1/

 li p{
        /* Add this */
        line-height: 42px;
        display: inline-table;
        vertical-align: top;
        /* Add this */
        color: black;
        font-size: 25px;
        margin:0;
    }