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

Question

我有这个 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

Answer 1

由于无法更改HTML，请尝试flex column

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>

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

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

How to make image display as block element when its inside h2 tag

html

css

layout