如何让文本与相邻的inline-block元素垂直居中对齐？

你可以通过以下两种简洁方法实现垂直居中，避免负margin带来的整体偏移问题：

方法1：利用vertical-align属性 #

inline-block元素与文本同属行内流元素，默认以基线（baseline）对齐，只需给色块元素添加vertical-align: middle，即可让文本与色块中间对齐：

.legend-item-box {
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
  /* 添加垂直居中属性 */
  vertical-align: middle;
}

方法2：给容器设置Flex布局 #

如果需要更灵活的布局控制，给每个包含色块和文本的容器添加display: flex和align-items: center，容器内的元素会自动垂直居中：

/* 给两个文本容器统一设置flex布局 */
.legend-item-container, fieldset > div:last-child {
  display: flex;
  align-items: center;
}

.legend-item-box {
  height: 16px;
  width: 30px;
  margin-right: 5px;
  border: 1px solid #999;
}

修改后的完整代码示例 #

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:1px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-container, fieldset > div:last-child {
  display: flex;
  align-items: center;
}

.legend-item-box {
  height: 16px;
  width: 30px;
  margin-right: 5px;
  border: 1px solid #999;
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}

<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span>Legend a
  </div>
  <div>
    <span class="b legend-item-box"></span> Legend b
  </div>
</fieldset>

之前使用负margin的问题在于：负margin会改变元素的外部布局空间，导致整个容器跟着偏移；而上述两种方法都是调整内部元素的对齐逻辑，不会影响外部容器的位置，是更稳妥的解决方案。

内容的提问来源于stack exchange，提问作者Max Pattern