如何在父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成为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与浮点和vertical-align，text-align等混合，你可能会得到意想不到的结果。

值得在flexbox上阅读 - 它非常强大。

Answer 2

您是否尝试过调整线高？

  .cssBoxText {
    line-height: 1.5;
  }

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;
    }