的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

来源

2012-02-23 www.amitpatil.me

添加一些属性

span img{ vertical-align:middle;}

见DEMO

来源

2012-02-23 08:02:33 diEcho

：P：P不知道为什么我没有想过这个:)反正谢谢 – 2012-02-23 08:21:00

改变你的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; 
}

来源

2012-02-23 08:01:31 arunes

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

来源

2012-02-23 08:15:41

最好的方法是使用LINE-HEIGHT或者我们可以使用

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

来源

2012-02-23 08:24:35 Danis

有不同的解决方案。您可以将您的内容包装到两个（例如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>

重要的是给他们一个高度属性和使用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>

在那个例子中的边距值由高度的一半值来计算（：= 20像素的margin-top：高度-10px）。但我更喜欢第一种方式。

来源

2012-02-23 08:28:18 terrorpixel

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

回答

Demo

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

回答

Demo

相关问题