は私が垂直フォローように、その隣のdivの位置にテキストを相対的に整列するCSSのテキストの位置

Question

理解する：

をしかし、それにそのラッパーのdivの高さは、そのIきた通知を実行しようとしながら、 https://jsfiddle.net/x7sr9mb1/1/

.table-keys-wrapper { 
 
    display: inline-block; 
 
} 
 

 
.key-color { 
 
    display: inline-block; 
 
    background: black; 
 
    width: 20px; 
 
    height: 20px; 
 
}

<div class="table-key"> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-sow" class="key-color"></span> 
 
    <span class="key-text">Sowing</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-plant" class="key-color"></span> 
 
    <span class="key-text">Planting</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-harvest" class="key-color"></span> 
 
    <span class="key-text">Harvesting</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-storage" class="key-color"></span> 
 
    <span class="key-text">Storage</span> 
 
    </div> 
 
</div>

：あなたがここに見ることができるように、それが必要よりも少し高く、テキストおよびキューブをラップ結果：

それは高さがheight: auto;（デフォルト）に設定されていて、外側のdivは、キューブの高さを取得していないのはなぜ

もう一つの問題、垂直整列するために最善の方法は何ですかテキストはキューブに比べて多く

は .key-textスパンは、デフォルトで vertical-align:baselineを持っているための助け

Answer 1

inline-blockの要素は、テキストだけのように、baselineの上に立ちます。

baselineのデフォルト値はvertical-alignです。あなたのinline-blockボックス

.key-color{ 
    display: inline-block; 
    vertical-align:middle;/* reset */ 
    background: black; 
    width: 20px; 
    height: 20px; 
} 

Answer 2

を感謝しています。

子供にvertical-align:middleを追加すると、親の完全な高さになります。

.table-keys-wrapper{ 
 
    display: inline-block; 
 
} 
 

 
.table-keys-wrapper * { 
 
    vertical-align:middle; 
 
} 
 
.key-color{ 
 
    display: inline-block; 
 
    background: black; 
 
    width: 20px; 
 
    height: 20px; 
 
}

<div class="table-key"> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-sow" class="key-color"></span> 
 
    <span class="key-text">Sowing</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-plant" class="key-color"></span> 
 
    <span class="key-text">Planting</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-harvest" class="key-color"></span> 
 
    <span class="key-text">Harvesting</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-storage" class="key-color"></span> 
 
    <span class="key-text">Storage</span> 
 
    </div> 
 
</div>

Answer 3

ためvertical-align:middleへ

リセットこの値をの位置を試してみましょう：絶対;

.table-keys-wrapper{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.key-color{ 
 
    display: inline-block; 
 
    background: black; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
} 
 

 
.key-text{ 
 
    padding-left: 22px; 
 
}

<div class="table-key"> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-sow" class="key-color"></span> 
 
    <span class="key-text">Sowing</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-plant" class="key-color"></span> 
 
    <span class="key-text">Planting</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-harvest" class="key-color"></span> 
 
    <span class="key-text">Harvesting</span> 
 
    </div> 
 
    <div class="table-keys-wrapper"> 
 
    <span id="key-storage" class="key-color"></span> 
 
    <span class="key-text">Storage</span> 
 
    </div> 
 
</div>