css - 居中问题标签

Question

我有 aimg和 a 的p内部div。

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

这是它的样子

我希望“可爱的 firefox 恶作剧”相对于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;
}

演示小提琴。

Answer 1

完毕。

更新了 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在这里。

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

JSFiddle在这里。

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;
    }