0

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:

enter image description here

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 &euro;100 and &euro;120 per week.</p>

Can anybody help me please?

Alvaro Montoro
  • 23,383
  • 6
  • 47
  • 81
Sara1982
  • 3
  • 4
  • 1) No image was attached. 2) You can always use style="" for almost any css styling! 3) can you share your HTML code. – A.Akram Jun 09 '15 at 11:18
  • see: [using display as table-cell](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div?answertab=active#tab-top) – A.Akram Jun 09 '15 at 11:27
  • Pocket money

    Pocket money is usually between €100 and €120 per week.

     – Sara1982 Jun 09 '15 at 13:18
  • I tried to add align:middle, but it doesn't make any difference... I don't even seem to be able to attach the image now in the comment :-( ... Sorry but it's the first time I post on stackoverflow. – Sara1982 Jun 09 '15 at 13:20
  • @A.Akram thanks for your link... I was just wondering if using tables would be correct as I read in many posts that if it's not tabular data, tables should not be used... – Sara1982 Jun 09 '15 at 13:23
  • You want the text aligned vertically and not horizontally, correct? – Alvaro Montoro Jun 09 '15 at 13:33

1 Answers1

0

You can do it quickly just by adding a height and a line-height to the p that contains the text. The values would be the same as the image: 42px:

<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;height:42px;line-height:42px">Pocket money is usually between &euro;100 and &euro;120 per week.</p>

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 and display:table-cell).

For example:

<p style="text-align:justify">
  <strong>Pocket money</strong>
</p> 
<div style="height:42px;display:table;">
  <div style="float:left;">
    <img alt="" src="http://www.kangarooaupair.com/system/images/W1siZiIsIjIwMTUvMDYvMDgvMjIvNTcvMjAvMzA1L1BvY2tldF9tb25leS5wbmciXSxbInAiLCJ0aHVtYiIsIjEzNXgxMzUjYyJdXQ/Pocket-money.png" style="height:42px; width:42px; margin-right:5px;" />
  </div> 
  <div style="display:table-cell;vertical-align:middle;">
    Pocket money is usually between &euro;100 and &euro;120 per week.
  </div>
</div>
Alvaro Montoro
  • 23,383
  • 6
  • 47
  • 81
  • That's great Alvaro. Thanks a million for both codes! Just a quick question. The content has to be responsive, so I was just wondering whether both codes are gonna work fine in a responsive website or whether one option is better than the other. – Sara1982 Jun 09 '15 at 15:33
  • For a responsive solution, I'd go with the second one, as it uses the `table-cell` display, it will wrap the content in a more graceful way than the top one (you can see by running the code snippets, click on "Full page", and resizing the page) – Alvaro Montoro Jun 09 '15 at 16:09