理解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 span具有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>

​