如何在 h2 标签内使图像显示为块元素答案

【问题标题】：How to make image display as block element when its inside h2 tag如何在 h2 标签内使图像显示为块元素
【发布时间】：2021-03-20 17:15:15
【问题描述】：

我有这个 html 代码：

<h2>
  <img align="left" class="left" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"> Hello world
</h2>

我无法更改 HTML，但我需要将文本放在下一行。我尝试显示块图像，但它不起作用。

img的宽度应该设置为auto

【问题讨论】：

标签： html css layout

【解决方案1】：

由于 HTML 无法更改，请尝试使用 flex 列

h2 {
  display: flex;
  flex-direction: column;
  align-items:center;
}

<h2>
  <img align="left" class="left" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"> Hello world
</h2>

【讨论】：

【解决方案2】：

只需禁用 align=left 应用的浮点数

img {
  display:block;
  float:none;
}

<h2>
  <img align="left" class="left" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"> Hello world
</h2>

带居中：

img {
  display:block;
  float:none;
  margin:auto;
}
h2 {
 text-align:center;
}

<h2>
  <img align="left" class="left" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"> Hello world
</h2>

【讨论】：