使用弹性框将图标和文本居中

Question

我在使用flex-box布局容器中的某些控件时遇到问题。

我认为这不是一个弹性盒问题，但我的问题是理解为什么绿色方块在底部得到这个额外高度，文本和数字同样在顶部。

它应该位于中间位置，但是它们会在哪里获得这个额外的高度，从而扰乱了中心：

.fd-square-symbol::before {
  content: '';
  position: relative;
  display: inline-block;
  background-color: #98A92A;
  width: 16px;
  height: 16px;
  outline: 1px dashed red;
  vertical-align: top;
}
.fd-input-group {
  display: flex;
  align-items: center;
  outline: 1px dashed red;
}
.fd-input-group__marker {
  margin-right: 5px;
  outline: 1px dashed blue;
}
.fd-input-group__number {
  font-weight: bold;
  outline: 1px dashed red;
}
.fd-input-group__label-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  outline: 1px dashed red;
}
.fd-input-group__label-column-label {
  outline: 1px dashed red;
}
.fd-info-button {
  min-width: 20px;
  height: 10px;
  outline: 1px dashed red;
}
.fd-input-group__control-column {
  display: inline-block;
  flex-grow: 1;
  outline: 1px dashed red;
}

<div class="fd-input-group">
  <div class="fd-input-group__label-column">
    <div>
      <span class="fd-input-group__marker fd-square-symbol"></span>
      <span class="fd-input-group__number">3.14</span>
      <label class="fd-input-group__label-column-label">A question</label>
    </div>
    <button type="button" class="fd-info-button"></button>
  </div>
  <div class="fd-input-group__control-column">
    <input type="text" value="a value" />
  </div>
</div>

JSBin

Answer 1

该行上的对象不是弹性项目。它们是块容器的子项，因为它们的父项是基本div，具有默认的display: block。

要让儿童成为弹性项目，div必须为display: flex或display: inline-flex。

绿色框底部有间隙的原因是因为它是inline-block元素。与所有内联元素一样，浏览器会增加空间以容纳下行器。

这个下降空间正在推动绿色框，这会增加div的高度，从而导致间隙高于其他元素。

将vertical-align: bottom应用于绿色框元素以解决问题。

有关详情，请参阅我的回答：https://stackoverflow.com/a/36975280/3597276