CODEWITHSUNDEEP
htmlcsscss-floattext-alignment
AngryHacker
AngryHacker

Reputation: 61606

How do I align text with the top of the image?

I have an image on the left and I'd like to line up the text to the top of the image.

I have the code below in this jsfiddle:

<div>
   <img src... >
   <span>hello  hello hello hello hello hello...</span> 
</div>

But it aligns the text along the bottom of the image, like this:

enter image description here

How do I flow the text around the image from the top?

Upvotes: 0

Views: 37

Answers (3)

Daniel Sixl
Daniel Sixl

Reputation: 2499

Floating the image would be useful: https://css-tricks.com/all-about-floats/

.media img {
    float: left;
    margin: 0 1em 1em 0;
 }
<div class="media">
    <img src="http://placehold.it/100x100/E8117F/000.png">
    <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
<span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
</div>

Upvotes: 1

Callat
Callat

Reputation: 3044

Adding the following css to your fiddle aligned the text with the top of the image. Is this what you are looking for? If not please add more details and I can edit my answer.

img {
  float: left;
}


img {
  float: left;
}
<div>
  <img src="http://placehold.it/100x100/E8117F/000.png">
  <span style="vertical-align:text-top">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
</div>

Upvotes: 1

andreas
andreas

Reputation: 16936

This is a typical case to use float:

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it.

Simply add float: left; to your <img> element and the text will start from the top of the image.

img {
  float: left;
  margin-right: 1em;
}
<div>
  <img src="http://placehold.it/100x100/E8117F/000.png">
  <span style="vertical-align:text-top">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</span>
</div>

Upvotes: 1

Related Questions