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:left2番目から削除し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

画像を左にフロートさせる必要があります。

CSS

.Images { float:left; }
于 2012-11-20T21:43:10.230 に答える
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 に答える