verstehen CSS Textposition

Question

Ich möchte vertikal Text relativ zu einer div Positionen neben ihm ausrichten, wie die folgen:

Aber während versuchen, es Ich habe Bekanntmachung zu tun, dass die Höhe der Umhüllung div dass den Text und die Würfel umschließt, ist etwas höher als es sein sollte, wie man hier sehen kann: 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>

Die Ergebnisse:

Warum die äußere div nicht die Höhe des Würfels bekommen, wie es ist die Höhe height: auto; (Standard) gesetzt ist

Eine andere Frage, was ist der beste Weg, um vertikal ausrichten Text relativ zu den Würfeln? schätzen

Viel Hilfe

Answer 1

inline-block s Elemente, wie Text, steht auf dem baseline.

baseline ist der Standardwert vertical-align.

Reset dieser Wert auf vertical-align:middle für Ihre inline-block Boxen

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

Answer 2

Das ist, weil die .key-text Spanne vertical-align:baseline standardmäßig hat.

Wenn Sie den Kindern vertical-align:middle hinzufügen, wird die vollständige Größe des übergeordneten Elements verwendet.

.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

Position Lassen Sie versuchen: absolute;

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