我正在尝试将图片与右侧的文字对齐。我还希望图像与文本垂直对齐。 但是当我开始编写文本时,它就会出现在图像下面。 任何想法如何解决这个??
<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"" 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>
答案 0 :(得分:1)
从第二个float:left
删除div
。
注意文本将如何从图像旁边开始,然后浮动。为了防止这种情况,请将overflow:hidden
添加到文本div,或者给它一个固定的宽度并将其浮动到左侧。
请参阅http://jsfiddle.net/D7gGp/3/。
要垂直对齐,请将图像和文本都放在div中,将图像置于绝对位置,设置顶部:50%以及margin-top :-( halfImageHeight)px,并将文本向右推以给出图像的空间。见http://jsfiddle.net/D7gGp/6/。
答案 1 :(得分:0)
您需要将图像浮动到左侧:
CSS
.Images { float:left; }
答案 2 :(得分:0)
您还可以使用保证金来调整文字
.classname {
margin-top: 15px;
}
or
.classname{
margin : 1px 1px 1px 1px; (please change as per your requirement)
/*(BOTTOM, LEFT, RIGHT, TOP)*/
}