如何在父div中水平對齊2 div div

我相信類似這樣的問題之前已經被問到過，但我似乎無法在我的最後使用這些解決方案。如何在父div中水平對齊2 div div

所以，我有我有麻煩箱的這一部分：

我要的是文本水平與周圍的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>

我能做些什麼，我的代碼，使文本與徽章水平對齊？先謝謝了。

來源

2017-03-22 Asem H

如果使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使解決佈局問題非常容易。你需要承諾使用它。如果您開始將浮動框和浮動框垂直對齊，文本對齊等，您可能會得到意想不到的結果。

這是值得關注的flexbox - 它真的很強大。

來源

2017-03-22 14:01:51 swervo

謝謝，這似乎是個伎倆。是的，Flexbox非常有趣，我會更多地閱讀它。 –

一種越來越認真處理Flexbox的幾個很好的資源： http://flexboxfroggy.com/ https://ohansemmanuel.github.io/uf_download.html – swervo

謝謝，我會考慮這個 –

您是否嘗試調整行高？

.cssBoxText { 
    line-height: 1.5; 
    }

來源

2017-03-22 13:39:07

嗨，line-height作品的標籤是1個句子，但2個變成扭曲。 –

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

來源

2017-03-22 14:11:41

如何在父div中水平對齊2 div div

回答

相關問題