html - 仅使用 HTML 将图像居中左对齐

Question

我有一张图片漂浮在左边，我想让右边的文字与图片居中。我无法访问 CSS，因为我使用的是文本编辑器，所以我只能用 HTML 设置样式。我尝试使用 horizo​​ntal-align:middle，但它不起作用。

这是我的:

这是 HTML 代码:

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

有人能帮帮我吗？

Answer 1

您只需将 height 和 line-height 添加到包含文本的 p 即可快速完成。值将与图像相同: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>

但正如他们在评论中所说，如果您使用不同的结构(不一定是表格，而是表格样式:display:table 和 display:table-cell)。

例如:

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