CODEWITHSUNDEEP
htmlcssflexbox
dec
dec

Reputation: 604

Center an icon and text with flex-box

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:

Problem 200%

.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

Upvotes: 3

Views: 10349

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371093

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

Upvotes: 2

Related Questions