html - 当右侧元素是居中对齐的多行文本时，如何删除并排元素之间的额外空间？

Question

我正在实现一个带有元素并排的标题 - 左侧的图标和右侧的标题。

标题居中对齐。

当屏幕变窄并且标题换到下一行时，在图标和标题之间会创建一个空格。

正如您在屏幕截图中看到的，空间是内容的一部分（它不是填充或边距）。

即使标题换行，如何让标题靠在图标上？

这是要重现的基本 HTML 和 CSS：

HTML

<div class="container">
  <svg class="svg" height="50" width="50">
    <circle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" />
  </svg> 
  <h1 class="title">The title of the page</h1>
</div>

CSS

.container {
  width: 320px; /* simulate mobile width */
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.title {
  text-align: center;
}

试用 Codepen 链接：https ://codepen.io/JayC_IRL/pen/VwKoJVQ

标签： htmlcssflexbox