Question

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

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

如何使文本和图像同等级以及中心对齐。任何想法都会有所帮助

这是css问题后编辑的

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

}

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

Answer 1

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

UPDATE：对于绝对定位，将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

Answer 2

分别为 vertical-align：middle 样式

提供文字和图片

这样的事情：

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

然后：

.valign {    
   vertical-align:middle;
}

在此测试：JSFiddle

或者替代方法是将容器div设置为

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

图像

vertical-align: middle;

Answer 3

对div使用display:table-cell，为内容使用vertical-align:middle。在这里小提琴：http://jsfiddle.net/xqDu7/10/

Answer 4

.click
{
    position:absolute;
    left:50%;
    top:50%;
    width:220px;
    height:40px;
    background-color:red;
    text-align:center;
    margin-top: -20px;
    margin-left: -110px;
}

http://jsfiddle.net/xqDu7/9/

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

4 个答案: