如何在div中对齐文本和图像顶点中间

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

演示版

.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 个解决方案

解决方案1
1 已采纳 2012-02-23 08:02:33

解决方案2
1 2012-02-23 08:15:41

演示版

解决方案3
0 2012-02-23 08:01:31

解决方案4
0 2012-02-23 08:24:35

解决方案5
0 2012-02-23 08:28:18

如何在div中对齐文本和图像顶点中间

问题描述

5 个解决方案

解决方案1 1 已采纳 2012-02-23 08:02:33

解决方案2 1 2012-02-23 08:15:41

演示版

解决方案3 0 2012-02-23 08:01:31

解决方案4 0 2012-02-23 08:24:35

解决方案5 0 2012-02-23 08:28:18

解决方案1
1 已采纳 2012-02-23 08:02:33

解决方案2
1 2012-02-23 08:15:41

解决方案3
0 2012-02-23 08:01:31

解决方案4
0 2012-02-23 08:24:35

解决方案5
0 2012-02-23 08:28:18