0

我正在尝试将图像与其右侧的文本对齐。我还希望图像与文本垂直对齐。但是当我开始写文字时，它会在图像下方。关于如何解决这个问题的任何想法？

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

3 回答 3

1

float:left从第二个中删除div。

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

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

要垂直对齐，请将图像和文本都包含在一个 div 中，绝对定位图像，将 top:50% 与 margin-top:-(halfImageHeight)px 一起设置，然后将文本向右推以留出空间图片。请参阅http://jsfiddle.net/D7gGp/6/。

于 2012-11-20T21:47:41.423 回答
0

您还可以使用边距来调整文本

.classname {
          margin-top: 15px;
 }

or

.classname{

            margin : 1px 1px 1px 1px; (please change as per your requirement)
                  /*(BOTTOM, LEFT, RIGHT, TOP)*/
}
于 2012-11-20T21:55:56.520 回答
0

您需要将图像浮动到左侧：

CSS

.Images { float:left; }
于 2012-11-20T21:43:10.230 回答