I have an image floating to the left, and I'd like to have the text on the right centered with the image. I don't have access to the CSS as I'm using a text editor, so I can only style it in HTML. I tried with horizontal-align:middle
, but it doesn't work.
This is what I have:
And this is the HTML code:
<p style="text-align:justify">
<strong>Pocket money</strong>
</p>
<p style="text-align:justify">
<img alt="" src="http://www.kangarooaupair.com/system/images/W1siZiIsIjIwMTUvMDYvMDgvMjIvNTcvMjAvMzA1L1BvY2tldF9tb25leS5wbmciXSxbInAiLCJ0aHVtYiIsIjEzNXgxMzUjYyJdXQ/Pocket-money.png" style="align:middle; float:left; height:42px; margin-right:5px; width:42px" />
</p>
<p style="text-align:justify">Pocket money is usually between €100 and €120 per week.</p>
Can anybody help me please?
You can do it quickly just by adding a
height
and aline-height
to thep
that contains the text. The values would be the same as the image: 42px:But as they said in the comments, this maybe be better if you used a different structure (not necessarily tables, but table styling:
display:table
anddisplay:table-cell
).For example: