CODEWITHSUNDEEP
cssimagehtmlalignment
Rui Martins
Rui Martins

Reputation: 2184

Align an Image with Text

I'm trying to align a image with text on its right. I also wanted the image to align vertically with the text. But when I start writing text, it goes under the image. Any ideas as how to solve this??

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

Upvotes: 0

Views: 171

Answers (3)

wezten
wezten

Reputation: 2256

Remove float:left from the second div.

Notice how the text will start next to the image, and will then float under. To prevent this, add overflow:hidden to the text div, or give it a fixed width and float it to the left.

See http://jsfiddle.net/D7gGp/3/.

To align vertically, enclose both the image and the text in a div, absolute position the image, set top:50% together with a margin-top:-(halfImageHeight)px, and push the text to the right to give space for the image. See http://jsfiddle.net/D7gGp/6/.

Upvotes: 1

Himanshu Saxena
Himanshu Saxena

Reputation: 360

you can also use margin to adjust your text

.classname {
          margin-top: 15px;
 }

or

.classname{

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

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

You need to float your image to the left:

CSS

.Images { float:left; }

Upvotes: 0

Related Questions