分部旁邊的圖像

如何將<img>放在<div>旁邊，以便圖像在中間垂直對齊？分部旁邊的圖像

<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>

我知道如何使用一個表來做到這一點：

<table style="font:10pt Arial"> 
<tr>  
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>  
<td style="width:100%"> 
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div> 
</td> 
    </tr> 
</table>

但我不知道如果我能做到這一點不表。

提前致謝！雨情人

來源

2010-11-27 Mori

您好，感謝您的提示！ :-) – Mori 2010-11-30 16:25:33

說實話從你的例子我有一種感覺，你可能會略微採取這種錯誤的方法。

就我個人而言，我會把這個圖標附加到div上作爲CSS background-image。之後，您可以在div的左側應用填充，使其等於圖像的寬度（再加上間距的幾個像素）。然後，你將能夠使用背景位置做這樣的事情：

background-position:0px center;

這會給你我更高的控制程度，

來源

2010-11-27 12:55:40 Jon

JavaScript設計師必須是美國人，因爲這是`中心'而不是'中心'。 – 2010-11-27 13:10:53

With塊元素如img和div，可以不是垂直於某物的中心放置它們，而無需實際具有的東西（元件），以垂直居中它們的內部。

話雖如此，除了使用some sort of hack之外，它仍然是不可能的。更簡單的方法是在其中一個元素上使用一個relative位置，並抵消其位置，以便在視覺上創建相同的效果，或者使用邊距/填充來實現相同的效果。

來源

2010-11-27 11:42:02

它可以通過以下方式完成。除非你在一個具有特定高度的元素內部並且可以玩，否則沒有簡單的方法。這可以在http://jsfiddle.net/jawilliams346614/CvpUB/1/

<div> 
    <img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;"> 
    <div style="font:10pt Arial;padding:5px;background-color:#ccc;"> 
     <span style="float:right">No. 1</span> 
     <span style="font-weight:bold;padding-right:10px;float:left;">John Doe</span> 
     <span style="color:#808080">11/14/2010 3:23:44</span> 
    </div> 
</div>

被視爲現在如果你增加字體大小，你將不得不改變填充到：

padding-top: 5px; // change in sync with bottom to center in text 
padding-bottom: 5px; 
padding-left: 5px; 
padding-right: 5px;

來源

2010-11-28 18:05:46

分部旁邊的圖像

回答

相關問題