将图像与文本对齐

问题描述：

我正在尝试将图像与右侧的文本对齐。我也希望图像与文字垂直对齐。但是当我开始写文本时，它会在图像下面。任何想法如何解决这个??将图像与文本对齐

<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>

为什么你的网址开头为'''HTTP：\\'''？ – Blender

答

从第二div删除float:left。

请注意文本将如何在图像旁边开始，然后将浮动到下方。为防止出现这种情况，请将overflow:hidden添加到文本div中，或者给它一个固定宽度并将其浮动到左侧。

请参阅http://jsfiddle.net/D7gGp/3/。

要垂直对齐，请将图像和文本都包含在div中，绝对位置为图像的顶端：50％和margin-top :-(halfImageHeight）px，然后将文本向右推为图像提供空间。请参阅http://jsfiddle.net/D7gGp/6/。

它适用于x和图像的对齐，现在我需要弄清楚图像在div中垂直居中。 vertical-align：middle什么都不做。 –

请参阅http://jsfiddle.net/D7gGp/6/。按margin-top：-10px - 输入图像高度的一半。 – wezten

正是我想要的。 TKS –

答

您需要浮动图像向左：

CSS

.Images { float:left; }

答

你也可以用保证金来调整您的文本

.classname { 
      margin-top: 15px; 
} 

or 

.classname{ 

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

将图像与文本对齐

相关推荐