css - 标题中的图像和文字居中

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

<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只需要封装文本，而不是图。）

谢谢。

最佳答案

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

像这样：

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