フレックスボックスでアイコンとテキストを中央に配置

Question

フレックスボックスを使用してコンテナ内の一部のコントロールをレイアウトする際に問題があります。

私はフレックスボックスの問題ではないと思うが、グリーンの四角形がこの余分な高さを底部に、テキストと数字を同様に上に持つ理由を理解するための私の問題。

それは途中でセンタリングする必要がありますが、どこにセンタリングを乱す、この余分な高さを得るのです：

.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

オブジェクトライン上にフレックスアイテムではありません。親がBasic divのデフォルトのdisplay: blockであるため、ブロックコンテナの子です。

子供がフレックスアイテムになるには、divはdisplay: flexまたはdisplay: inline-flexである必要があります。

緑色のボックスの下部に隙間がある理由は、inline-block要素です。すべてのインライン要素と同様に、ブラウザはディセンダに対応するためのスペースを追加します。

このディケンダースペースは緑色のボックスを上に押しています。これはdivに高さを加えているため、他の要素の上にギャップができます。

vertical-align: bottomを緑のボックス要素に適用して問題を解決してください。

は、詳細についてはここに私の答えを参照してください：緑の広場へトップ：https://stackoverflow.com/a/36975280/3597276