Jquery 如何在水平和垂直方向将小图像与中心文本对齐？

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

对于水平方向，我给出了

文本对齐：居中对于垂直图像，由于图像大小和实际图像略有不同，因此它是png格式，因此您可以看到透明图像。图像中有额外的空间，因此可能会显示在顶部

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

以下是问题提出后编辑的css

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

}


绝对位置有影响吗？因为在我的本地语言中，我不能像在fiddle answers中那样对齐它，只需通过设置
display:table cell将div作为表格单元格处理即可值。然后可以使用
垂直对齐：中间以对齐内容

更新：对于绝对定位，将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;
}


竖起大拇指
.包装纸{
位置：绝对位置；
顶部：100px；
左：100px；
}
点击
{
宽度：50%；
高度：50px；
背景色：红色；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
img{
垂直对齐：中间对齐；
}

通过设置
显示：表格单元格，只需将div作为表格单元格处理值。然后可以使用
垂直对齐：中间以对齐内容

更新：对于绝对定位，将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;
}


竖起大拇指
.包装纸{
位置：绝对位置；
顶部：100px；
左：100px；
}
点击
{
宽度：50%；
高度：50px；
背景色：红色；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
img{
垂直对齐：中间对齐；
}

分别为文本和图像设置垂直对齐：中间样式

大概是这样的：

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

在此处测试：

或者，将container div设置为

display: table-cell;
vertical-align: middle;

和图像到

vertical-align: middle;

分别为文本和图像指定垂直对齐：中间样式

大概是这样的：

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

在此处测试：

或者，将container div设置为

display: table-cell;
vertical-align: middle;

和图像到

vertical-align: middle;


对div使用
显示：表格单元格
，对内容使用
垂直对齐：中间
。在这里摆弄：
对div使用
显示：表格单元格
，对内容使用
垂直对齐：中间
。在这里拉小提琴：
第一个小提琴本身工作正常。备选方案的优势是什么？两种解决方案都没有优势。这只是你想要使用的个人喜好的问题。但是第一种解决方案包括在文本周围添加一个附加的元素。如果.click类具有该样式，则div中的文本不需要单独的垂直对齐：中间。只有图像需要单独使用。第一个图像本身工作正常。备选方案的优势是什么？两种解决方案都没有优势。这只是你想要使用的个人喜好的问题。但是第一种解决方案包括在文本周围添加一个附加的元素。如果.click类具有该样式，则div中的文本不需要单独的垂直对齐：中间。只有图像需要分开。不，我只是增加了更多的高度来观察效果。请记住，百分比值指的是父元素维度。不，我只是增加了更多的高度以查看效果。请记住，百分比值指的是父元素维度。他希望div的内容对齐，而不是div本身…；-）他希望div的内容对齐，而不是div本身……；-）对不起，我忘了包括它的位置：绝对；现在我没有把它放在中心不，我已经有了这个元素的绝对位置；现在我没有把它放在中心不，我已经有了这个元素的绝对位置。谢谢，它有，它强制显示：block；但是你可以把元素扭曲成另一个元素，给外部元素一个位置：绝对；我将更新我的答案。是的，它会强制显示：block；但是你可以把元素扭曲成另一个元素，给外部元素一个位置：绝对；我会更新我的答案。