將圖像與文本對齊

我正在嘗試將圖像與右側的文本對齊。我也希望圖像與文字垂直對齊。但是當我開始寫文本時，它會在圖像下面。任何想法如何解決這個??將圖像與文本對齊

<div style="float: left; vertical-align: middle"> 
<img alt="" src="/portals/85/Images/AukraMaritime.gif" class="Images" /> 
</div> 
<div style="float: left;"> 
<a href="http:\\www.aukramaritime.no&quot;" class="LinksMenu LeftMenu HoverLinkH1">Aukra Maritime</a> 
<br /> 
<br /> 
<span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </span><br /> 
<br /> 
<a href="http:\\www.aukramaritime.no" class="LinksMenu LeftMenu HoverLink">www.aukramaritime.no</a> 
</div>

來源

2012-11-20 Rui Martins

爲什麼你的網址開頭爲'''HTTP：\\'''？ – Blender

從第二div刪除float:left。

請注意文本將如何在圖像旁邊開始，然後將浮動到下方。爲防止出現這種情況，請將overflow:hidden添加到文本div中，或者給它一個固定寬度並將其浮動到左側。

請參閱http://jsfiddle.net/D7gGp/3/。

要垂直對齊，請將圖像和文本都包含在div中，絕對位置爲圖像的頂端：50％和margin-top :-(halfImageHeight）px，然後將文本向右推爲圖像提供空間。請參閱http://jsfiddle.net/D7gGp/6/。

來源

2012-11-20 21:47:41 wezten

它適用於x和圖像的對齊，現在我需要弄清楚圖像在div中垂直居中。 vertical-align：middle什麼都不做。 –

請參閱http://jsfiddle.net/D7gGp/6/。按margin-top：-10px - 輸入圖像高度的一半。 – wezten

正是我想要的。 TKS –

您需要浮動圖像向左：

CSS

.Images { float:left; }

來源

2012-11-20 21:43:10

你也可以用保證金來調整您的文本

.classname { 
      margin-top: 15px; 
} 

or 

.classname{ 

      margin : 1px 1px 1px 1px; (please change as per your requirement) 
        /*(BOTTOM, LEFT, RIGHT, TOP)*/ 
}

來源

2012-11-20 21:55:56 user1189070

將圖像與文本對齊

回答

相關問題