理解CSS文本位置

Question

我想垂直对齐文本相对于它旁边的div位置，如下所示：

但是在尝试这样做时，我注意到包装文本和立方体的包装div的高度比它应该高一点，如下所示： https://jsfiddle.net/x7sr9mb1/1/

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果：

为什么外部div不能获得立方体的高度，因为它的高度设置为height: auto;（默认值）

另一个问题是，将文本相对于立方体垂直对齐的最佳方法是什么？

非常感谢帮助

Answer 1

这是因为.key-text范围默认为vertical-align:baseline。

如果您要向孩子添加vertical-align:middle，则会占用父母的全部身高。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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 3

让我们尝试位置：绝对;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;