html - 将 和 在一行 中垂直居中

Question

我有一个 HTML 文档，其中有一个包含一些图标的顶栏。顶部栏只有一行，其中的所有内容都应垂直居中。

现在我想添加一个 <option>和一个 <button>到顶部栏，但我不知道如何将它垂直居中在顶部栏中，这是一个 div。

Jsfiddle

Answer 1

Vertical Centering https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

在这种情况下我会使用 flexbox 居中(如果你对这个浏览器支持列表没问题 https://caniuse.com/#search=flexbox )

#topbar{
  display: inline-flex;
  align-items: center;
}