Demo

Question

如何对齐文本和图像垂直对齐中间？

这里的jsfiddle演示：http://jsfiddle.net/j3wDP/

我的CSS：

.rating{
    border: 1px solid red;
    font-family: verdana;
    font-size: 12px;
    width: 180px;
    height: 20px;
}
span img{
    width: 20px;
    height: 20px;
    padding: 0px 3px; 
}

我的HTML：

<body>
   <div class="rating">Rating <span><img src="like.jpg">233<img src="dislike.jpg">100</span></div>  
</body

Answer 1

添加一些属性

span img{  vertical-align:middle;}

请参阅DEMO

Answer 2

Demo

.rating{
    border: 1px solid #8e8e8e;
    font-family: verdana;
    font-size: 12px;
    width: 180px;
line-height:50px;
    height: 50px;
}
span img{
    width: 20px;
    height: 20px;
    padding: 0px 3px; 
}

您可以使用line-height

Answer 3

像这样改变你的CSS

.rating{
    border: 1px solid #8e8e8e;
    font-family: verdana;
    font-size: 12px;
    width: 180px;
    height: 20px;
    line-height:20px;
}
span img{
    width: 20px;
    height: 20px;
    padding: 0px 3px; 
    vertical-align:middle;
}

Answer 4

最好的方法是使用Line-height或者我们可以使用

.rating{ display:table-cell; vertical-align:middle; }

Answer 5

有不同的解决方案。您可以将内容包装成两个（例如div-）容器，并像表一样处理它们。这样的事情：

<div style="display:table; height: 200px; background:red;">
    <div style="display:table-cell; height:200px; vertical-align:middle">
        <span>Your Content</span>
    </div>
</div>

重要的是给它们一个height属性并使用display：table和display：table-cell而不是它。另一种方法是将这个跨度与位置居中：绝对：

<div style="height:200px; background:red; position:relative">
    <span style="height:20px; position:absolute; top:50%; margin-top:-10px;">Your content</span>
</div>

在该示例中，margin-top值由高度的一半值计算（高度：20px = margin-top：-10px）。但我更喜欢第一种方式。

如何在div中对齐文本和图像垂直中间

5 个答案:

Demo