的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

相關問題