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

Question

我正在努力在同一行中制作一个按钮和一个标题（文本）。但是，标题必须位于中间，而按钮仍位于左上角。

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

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

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

#icon {
  display: inline;
}

预期：

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

实际：

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

Answer 1

我推荐的最快捷的方法是使用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;
}

从未使用过的flexbox简介： https://www.youtube.com/watch?v=k32voqQhODc