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属性将文本居中。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.wrap {
  display: flex;
  align-items: center;
}

.box {
  background-color: blue;
  width: 70px;
  height: 70px;
}

＆＃13;

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

＆＃13;

Answer 2

使用可以使用内联块和垂直对齐。

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

.text{
   padding-left: 10px; 
   display: inline-block;
   vertical-align: middle;
}

将文本与另一个元素对齐的最佳方法是什么？

2 个答案: