Question

我知道这个问题已经被问了很多，我已经对这一点做了大量的研究（这里有Stack Overflow和其他地方通过谷歌等），但是我找不到能够处理我遇到的问题的答案。 / p>

我有一个下拉列表，其中包含以下代码：

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;
}

我还使用上面的代码here制作了一个jsfiddle。

我想弄清楚如何让两个<span>在垂直方向上垂直居中。

Answer 1

Flexbox可以做到这一点

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

▶1 ^st选项：

在您的代码中，您对所有 display: inline-block 元素以及 span使用 .box ，您只需在代码中添加 vertical-align: middle ，如下所示：

.dropdown .box, .dropdown span {
    vertical-align: middle;
}

jsFiddle →here。

<强>段：

.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;
  vertical-align: middle;
}
.dropdown span{
  display: inline-block;
  color: white;
}

.dropdown .box,
.dropdown span {
  vertical-align: middle;
}

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

▶2 ^nd选项：

您有另一个选择是将 .dropdown 的显示更改为 display: flex 并设置 align-items: center 如下图所示：

.dropdown {
    display: flex;
    align-items: center;
}

jsFiddle →here。

<强>段：

.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;
  vertical-align: middle;
}
.dropdown span{
  display: inline-block;
  color: white;
}

.dropdown {
  display: flex;
  align-items: center;
}

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

Answer 3

试试这个：

HTML：

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

CSS：

.data li{
    list-style:none;
}

CSS - div中的垂直对齐跨度

3 个答案: