-Center ein Symbol und Text mit Flex-Box

Question

Ich habe ein Problem mit Layouten einiger Steuerelemente in einem Behälter mit Flex-Box.

Ich denke, es ist kein Flex-Box-Problem ist, aber mein Problem zu verstehen, warum das grüne Quadrat diese zusätzliche Höhe am Boden erhalten und den Text und die Zahl ebenfalls an der Spitze.

Es sollte in der Mitte zentriert werden, aber wo bekommen sie diese zusätzliche Höhe, die Zentrierung zu stören:

.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

Die Objekte Auf der Linie sind keine Flex-Items. Sie sind Kinder eines Block Container, weil ihre Eltern ein Grund div mit der Standard-display: block sind.

Damit die Kinder Flex-Elemente sein können, müsste das div display: flex oder display: inline-flex sein.

Der Grund, das grüne Feld eine Lücke am Boden hat, ist, weil es ein inline-block Element ist. Wie bei allen Inline-Elementen fügt der Browser Platz zum Unterbringen von Unterlängen hinzu.

Dieser Abseilgerät Raum treibt das grüne Feld auf, welches die Höhe der div ist das Hinzufügen, die sich oberhalb der anderen Elemente in der Lücke führt.

Bewerben vertical-align: bottom auf das Element grüne Box um das Problem zu lösen.

Siehe meine Antwort hier für weitere Informationen: https://stackoverflow.com/a/36975280/3597276