仅使用 HTML 将图像左中对齐答案

【问题标题】：Align image middle left using HTML only仅使用 HTML 将图像左中对齐
【发布时间】：2015-08-24 04:12:50
【问题描述】：

我有一个浮动到左侧的图像，我希望右侧的文本与图像居中。因为我使用的是文本编辑器，所以我无法访问 CSS，所以我只能在 HTML 中设置它的样式。我试过horizontal-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>

有人可以帮帮我吗？

【问题讨论】：

1) 没有附加图片。 2) 您可以随时使用 style="" 进行几乎任何 css 样式！ 3）你能分享你的HTML代码吗？
见：using display as table-cell
零花钱

kangarooaupair.com/system/images/…" style="align:middle; float:left; height:42px; margin-right:5px; width:42px" />

零用钱通常在每周 €100 到 €120 之间。
我尝试添加 align:middle，但没有任何区别...我现在似乎无法在评论中附加图像:-( ...抱歉，这是我第一次在 stackoverflow 上发帖。
@A.Akram 感谢您的链接...我只是想知道使用表格是否正确，因为我在许多帖子中读到如果不是表格数据，则不应使用表格...

标签： html css image alignment

【解决方案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>

但正如他们在 cmets 中所说，如果您使用不同的结构（不一定是表格，而是表格样式：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>

【讨论】：

阿尔瓦罗太棒了。感谢这两个代码一百万！只是一个快速的问题。内容必须是响应式的，所以我只是想知道这两种代码是否都能在响应式网站中正常工作，或者一个选项是否比另一个更好。
对于响应式解决方案，我会选择第二个，因为它使用table-cell 显示，它将以比顶部更优雅的方式包装内容（您可以通过运行代码sn-ps，点击“整页”，调整页面大小）