Center an icon and text with flex-box

Question

I have a problem with layouting some controls in a container using flex-box.

I think it is not a flex-box problem, but my problem to understand why the green square get this extra height at the bottom and the text and number likewise at the top.

It should be centered in the middle, but where do they get this extra height, disturbing the centering:

.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

tried adding vertical-align:top to the green square? http://jsbin.com/qelafa/4/edit?css,output — Rachel S, May 04 '16 at 16:37
@Rachel S: It does something that looks right. But why is there the extra height and why does your suggestion affects also the text? — dec, May 04 '16 at 16:54

score 2 · Accepted Answer · edited May 23 '17 at 12:16

The objects on the line are not flex items. They are children of a block container because their parent is a basic div with the default display: block.

For the children to be flex items, the div would need to be display: flex or display: inline-flex.

The reason the green box has a gap at the bottom is because it is an inline-block element. Like with all inline elements, the browser adds space to accommodate descenders.

This descender space is pushing the green box up, which is adding height to the div, which is resulting in the gap above the other elements.

Apply vertical-align: bottom to the green box element to resolve the issue.

See my answer here for more details: https://stackoverflow.com/a/36975280/3597276

Center an icon and text with flex-box

1 Answers1