如何在忽略标题旁边的图标的同时居中标题？

Question

假设我有这样的代码：

.container {
  width: 300px;
  margin: 25px auto;
  border: 1px solid #ddd;
}

.header {
  display: flex;
  justify-content: center;
  color: #444;
  font-size: 20px;
}

.description {
  display: flex;
  justify-content: center;
  color: #666;
}

<div class="container">
  <div class="header">
    <div class="title">title</div>
    <div class="icon">icon</div>
  </div>
  <div class="description">
    description
  </div>
</div>

您会注意到标题并没有在描述上方居中，因为它居中了 title 和 icon 的整个 div。有什么办法可以“忽略”图标，只让标题居中，这样标题就在描述上方居中，图标就放在它的右边吗？

我唯一能想到的就是制作 header position: relative 和 icon position: absolute 但是如果标题换行到多行它就不起作用.而且，这似乎更脆弱。

Answer 1

您可以将 icon 的宽度设置为 0px 并显示值，可以设置 overflow: initial.

.container {
  width: 300px;
  margin: 25px auto;
  border: 1px solid #ddd;
}

.header {
  display: flex;
  justify-content: center;
  color: #444;
  font-size: 20px;
}

.icon {
  width: 0px;
  overflow: initial;
}

.description {
  display: flex;
  justify-content: center;
  color: #666;
}

<div class="container">
  <div class="header">
    <div class="title">title</div>
    <div class="icon">icon</div>
  </div>
  <div class="description">
    description
  </div>
</div>

如何在忽略标题旁边的图标的同时居中标题？

How to center a title while ignoring the icon next to it?

html

css

centering