Html 如何仅将一个内联元素居中？

我正在努力使一个按钮和一个标题（文本）在同一行。但是，标题必须位于中间，而按钮则保持在左角

我试着将标题居中对齐，但标题保持在按钮旁边，而不是居中

<button id="icon">Button</button>
<h1 id="title">Title</h1

#title {
  font-size: 12px;
  text-align: center;
  display: inline;   
}

#icon {
  display: inline;
}

实际：

|[button][title]-------------------------|

---

我推荐使用flexbox是一种快速而简单的方法

<div id="container">
  <button id="icon">Button</button>
  <h1 id="title">Title</h1>
</div>

#title {
  font-size: 12px;
  text-align: center;
  flex: 5;   
}

#icon {
  flex: 1;
}

#container {
  display: flex;
}

按钮
标题
#头衔{
字体大小：12px；
文本对齐：居中；
弹性：5；
}
#图标{
弹性：1；
}
#容器{
显示器：flex；
}

如果您从未使用过flexbox，那么这是一个很棒的介绍：

---

您可以尝试使用边距，或合并为div，然后文本对齐。现代的方法是使用flexbox

<div id="container">
  <button id="icon">Button</button>
  <h1 id="title">Title</h1>
</div>

#title {
  font-size: 12px;
  text-align: center;
  flex: 5;   
}

#icon {
  flex: 1;
}

#container {
  display: flex;
}