标题中的中心图像和文本

Question

我想创建一个标题，其中包含一个大约三行高的图像，以及我想要放在其右边的文本。整个标题居中。

<center><h1><img.../>Text of heading which is a little long</h1></center>

如果窗口变窄，标题包裹在图像下方，则会出现问题。我想以某种方式将文本放在一个扭曲的框中，但是立即位于img框的右侧，整个批次居中。

如此包裹

    IIII  TTT TTT
    IIII  TT TTT 

不喜欢这个

    IIII  TTT TTT
    IIII
    TT TTT 

（其中Is是图像，Ts是文本）。

我尝试了各种排列无济于事。浮动不会这样做。也许这需要一张桌子？

（H1只需要包含文本，而不是Img。）

感谢。

Answer 1

尝试将其包装在div中，然后使用flex

定位div中心

像这样：

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

实际上，我只是保持简单

  <center><table><tr>
  <td><img></td><td>Heading text</td>
  </tr></table></center>

只是古老的HTML，使用表格的意思。应该早点考虑它，而不是被盒子模型带走。