css - 将文本与另一个元素对齐的最佳方法？

Question

嗯，通常当我需要对齐框旁边的文本时，我会这样做: https://codepen.io/Maartinshh/pen/yMdNrW ，但我听说过使用它的可怕错误这种工作的填充和边距。有替代方案吗？

<div class="box"></div>
<div class="text">Text</div>

.box{
  background-color:blue;
  width: 70px;
  height: 70px;
}

.text{
  padding-left: 80px; 
  margin-top: -40px;
}

Answer 1

对于您的示例，我会将显示类型更改为inline-block，然后使用vertical-align 属性使文本居中。

.box {
  background-color: blue;
  width: 70px;
  height: 70px;
  display: inline-block;
  vertical-align: middle;
}

.text {
  display: inline-block;
  vertical-align: middle;
}

<div class="box"></div>
<div class="text">Text</div>

第二种方法可能是使用 flexbox。您可以将两个 div 包装在一个容器中并对其应用 flex 属性:

.wrap {
  display: flex;
  align-items: center;
}

.box {
  background-color: blue;
  width: 70px;
  height: 70px;
}

<div class="wrap">
  <div class="box"></div>
  <div class="text">Text</div>
</div>