html - CSS - div 中的垂直对齐跨度

Question

我知道这个问题已经被问了很多，我已经对这一点进行了大量研究(在 Stack Overflow 和其他地方通过谷歌等)，但我找不到解决我遇到的问题的答案。

我有一个包含以下代码的下拉菜单:

HTML

<div class="dropdown">
  <div class="box">T</div>
  <span class="phone-number">(999) 999-9999</span>
  <span class="email">temp@temp.com</span>
</div>

CSS

.dropdown{
  max-height: 256px;
  margin: 0px 4px;
  padding: 16px;
  overflow: hidden;
  background-color: grey;
}
.dropdown .box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.dropdown span{
  display: inline-block;
  color: white;
}

我还用上面的代码做了一个jsfiddle here .

我想知道如何得到这两个 <span>在下拉列表中垂直居中。

Answer 1

Flexbox 可以做到这一点

.dropdown {
  max-height: 256px;
  margin: 0px 4px;
  padding: 16px;
  overflow: hidden;
  background-color: grey;
  display: flex;
  align-items: center;
}
.dropdown .box {
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.dropdown span {
  display: inline-block;
  color: white;
}

<div class="dropdown">
  <div class="box">T</div>
  <span class="phone-number">(999) 999-9999</span> 
  <span class="email">temp@temp.com</span>
</div>