在一行<div>中垂直居中<option>和<button>

Question

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

现在我想在顶部栏中添加<option>和<button>，但我无法弄清楚如何将其垂直居中于顶部栏中，这是一个div。

Jsfiddle

Answer 1

  

垂直居中https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

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

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

Answer 2

topbar中的所有项目均为inline-block，您可以使用vertical-align: middle将其作为中心。

我已将vartical-align: middle推上#topbar img＆amp; #topbar .separator

#topbar {
  height: 40px;
  background: #ffffff;
  border-bottom: 1px #ddd solid;
  width: 100%;
  box-shadow: 0px 4px 16px #e0e0e0;
  display: inline-block;
}

#topbar img {
  height: auto;
  width: 36px;
  vertical-align: middle;
  height: 36px;
  padding: 2px;
  margin: 0px;
}

#topbar .separator {
  border-right: 1px #000 solid;
  height: 30px;
  width: 0px;
  margin: 2px;
  display: inline-block;
  vertical-align: middle;
}

<div id="topbar">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Perfektes_Rechteck.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Perfektes_Rechteck.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Perfektes_Rechteck.svg" />
  <div class="separator"></div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Perfektes_Rechteck.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Perfektes_Rechteck.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Perfektes_Rechteck.svg" />
  <div class="separator"></div>
  <select>
        <option value="b">Build and Run</option>
        <option value="h">Build to HTML</option>
        <option value="e">Build Executable</option>
      </select>
  <button>Start</button>

</div>

Answer 3

替换display：inline-block;带显示屏：inline-flex;在顶部栏css。