如何垂直居中这个元素？ [复制]答案

【问题标题】：How to center this element vertically? [duplicate]如何垂直居中这个元素？ [复制]
【发布时间】：2019-06-07 13:29:15
【问题描述】：

.inputSet {
  display: inline-block;
}

input {
  display: block;
}

<div>
  <span>δ:</span>
  <div class="inputSet">
    <input type="number">
    <input type="range">
  </div>
</div>

如您所见，这个δ 在底部，看起来很丑。相反，δ 应该垂直居中。（上移了一点）。

我已阅读本指南：https://css-tricks.com/centering-css-complete-guide/，但找不到解决方案。 δ 显然是一个 inline-* 元素，但所有将此类元素居中的方法都需要知道封闭 div 的高度：

我不能做span {padding-top: 30px; padding-bottom: 30px;}，因为我不知道封闭div 的渲染高度。
出于同样的原因，我不能span {height: 100px; line-height: 100px; white-space: nowrap;}。

有什么办法吗？

【问题讨论】：

标签： css position centering

【解决方案1】：

因此，当涉及到垂直对齐任何东西时，我是 Flexbox 的忠实粉丝，我添加了一些边距并重新组织了 HTML 以使其正常工作，让它看起来更好一点。我还添加了一个 .Container 类，以便您可以进一步了解它是如何工作的，请查看此内容以获取更多信息：Flexbox

.Container {
  display: flex;
  margin: 24px 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.icon {
  margin-right: 6px;
}

.inputSet {
  margin: 12px 0;
  display: flex;
  flex-flow: row;
  align-items: center;
}

<div class="Container">
  <input type="number">
  <div class="inputSet">
    <span class="icon">δ:</span>
    <input type="range">
  </div>
</div>

【讨论】：

【解决方案2】：

您可以将vertical-align: middle 用于.inputSet

.inputSet {
  display: inline-block;
  vertical-align: middle
}

input {
  display: block;
}

<div>
  <span>δ:</span>
  <div class="inputSet">
    <input type="number">
    <input type="range">
  </div>
</div>

【讨论】：