如何在父 div 中水平对齐 2 个 div

Question

我相信以前有人问过类似的问题，但我似乎无法最终解决这些问题。

所以我有一个盒子的这一部分我遇到了麻烦：

我想要的是文本与我放在里面的周围 div 水平对齐。现在我的代码是这样的：

.cssAward {
   width: 299px;
   height: 54px;
   margin: auto;
   margin-bottom: 25px;
   display: flex;
}

.cssImageBox {
   float: left;
   width: 60px;
   height: 54px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

.cssBoxText {
   font-size: 18px;
   color: #5e5e5e;
   font-family: inherit;
   font-weight: 300;
   margin-left: 15px;
   height: 54px;
   width: 224px;
}

该部分的 HTML 是：

 <div class="cssAward">
     <div class="cssImageBox">
         <img class="cssBadge" src="images/celeb5star.png"/>
     </div>
     <div class="cssBoxText">
       Multi-year top sales agent
     </div>
 </div>     

我可以对我的代码做些什么来使文本与徽章水平对齐？提前致谢。

Answer 1

你试过调整行高吗？

  .cssBoxText {
    line-height: 1.5;
  }

Answer 2

如果您也将 cssBoxText 设为 flex，然后应用一些 flex 属性，您应该能够做到这一点而不会出现太多问题：

.cssBoxText {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

或者，如果您添加：

align-items: center;
align-content: center;

到 .cssAward 也应该这样做。

Flex 使解决布局问题变得非常容易。不过，您需要承诺使用它。如果您开始将 flexbox 与浮动和垂直对齐、文本对齐等混合使用，您可能会得到意想不到的结果。

flexbox 值得一读——它真的很强大。

Answer 3

就像 swervo 说的，但如果你想保持 15px 的边距。删除justify-content: center; 并保留您的margin-left: 15px;。

 .cssBoxText {
        display: flex;
        align-items: center;
        align-content: center;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        margin-left: 15px;
    }