Понимание позиции CSS текст

Question

Я хочу вертикального выравнивания текста по отношению к Div позиции рядом с ним, как следующие:

Но в то время как попытаться сделать это, я заметил, что высота обертки DIV, что оборачивает текст и куб, немного выше, чем это необходимо, как вы можете увидеть здесь: 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>

Результаты:

Почему внешний DIV не получить высоту куба, а его высота устанавливается в height: auto; (по умолчанию)

Другой вопрос, что это лучший способ вертикального выравнивания текст относительно кубов?

Ценит помощь

Answer 1

inline-block сек элементы, так же как и текст, стоит на baseline.

baseline является значением по умолчанию vertical-align.

сброса это значение vertical-align:middle для inline-block коробки

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

Answer 2

Это потому, что продолжительность .key-text имеет vertical-align:baseline по умолчанию.

Если вы добавите 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

Попытаемся позицию: абсолютная;

.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>