親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フレックス行い、その後、あなたはあまりにも多くの問題もなく、これを行うことができる必要があり、いくつかのフレックス特性を適用する場合：あなたが追加した場合また

.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では、レイアウトの問題を非常に簡単に解決できます。あなたはそれを使用することにコミットする必要があります。フレックスボックスと浮動小数点数を混在させて縦書き、テキスト整列などを開始すると、予期しない結果が生じることがあります。

フレックスボックスで読む価値があります。本当に強力です。

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