jquery - 如何将小图像与水平和垂直居中的文本居中对齐？

Question

我有一个 div，我试图在其中居中对齐垂直和水平的文本和图像。

所以对于水平我已经给出了 text-align: center; 对于垂直我缺少因为图像大小和实际图像有点不同，它是 png 格式所以你可以看到透明.图片中有额外的空间，因此它可能会显示在顶部。

如何使文本和图像处于同一水平并居中对齐。任何想法都会有所帮助

这是提问后编辑的 css

.click
{
    width:50%;
    height:50%;
    background-color:red;
    text-align:center;
    position:absolute;

}

JSfiddle 绝对位置有影响吗？因为在我的本地我不能像 fiddle 答案那样对齐它

Answer 1

只需通过设置 display: table-cell; 值将 div 处理为表格单元格。然后你可以使用 vertical-align: middle; 来对齐内容。

更新:对于绝对定位，将 div 包装到外部 div 中并在那里应用位置。

<div class="wrapper">
    <div class="click">
        Thumbs up <img src="http://i.stack.imgur.com/nC5s4.png">
    </div>
</div>

.wrapper {
    position: absolute;
    top: 100px;
    left: 100px;
}
.click
{
    width:50%;
    height:50px;
    background-color:red;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}
img {
    vertical-align: middle;
}

fiddle