Questions › Text to left and image to right within same tag
Onilol Asked

I'm having some troubles aligning a piece of text along with an image that should be ( my guess ) within the same tag.

It is supossed to look like this: How it should look (Ignore the black stripe)

but it is currently looking like this: How it currently looks

The HTML for it is:

<span class="size-chart-disclaimer">If in doubt, measure your similar<br>
 style garment and match our grid. 
<img src="{{'we-use.gif' | asset_url}}"/></span>

and the CSS is:

.size-chart-disclaimer img{
float:right;
}

Could someone shed a light on the best way to achieve this ?

Comments :

Do you mind putting the text in another tag?

Onilol replied

@MaihanNijat I could do that! Any pointers on the best way ?

I created an example for you in the answer. check it.


3 Answers :
Maihan Nijat answered

I suggest to use a tag for the text, and then style it.

.size-chart-disclaimer img {
  float: right;
}
p {
  width: 240px;
  display: inline-block;
  margin-top: 0px;
}
<span class="size-chart-disclaimer">
  <p>
  If in doubt, measure your similar
  style garment and match our grid. 
  </p>
  <img src="http://www.placehold.it/50x50"/>
</span>

Onilol replied
Just had to add the line-height property but this worked like a charm! Thanks.;
Jasper van Merle answered

Just placing the image in front of the text does the job aswell:

.size-chart-disclaimer img{
  float: right;
}
<span class="size-chart-disclaimer">
    <img src="http://www.placehold.it/100x50" /> If in doubt, measure your similar
    <br /> style garment and match our grid.
</span>

leo.fcx answered

Add following css to yout img tag: vertical-align: middle;

See this JSFiddle