HTML/CSS我如何使這個div的中心？

我的HTML：

<div id="reszta"> 
    <h1>HELP ME</h1> 
    <div class="app-container"> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    </div> 
    </div>

並沒有CSS：

https://paste.ofcode.org/eCENzdgqewVd9AWbNAe45u

我怎樣才能使這些的.app申報單上DIV的.app容器的中心？現在，這個.app-container的左側有浮動。有人有很好的解決方案？也許有邊距或最小寬度的東西？我不知道。

來源

2017-08-01 Jeremy Clarkson

你想他們仍然在2行，但居中？或者你想讓他們堆疊（每行1個），並居中？ – Andrea

從'.app'中刪除'float：left'屬性並添加'display：inline-block' https://jsfiddle.net/ns0k2zpg/ –

我想要2行但居中。 @Ihazkode謝謝，它的工作原理。 –

隨着當前的CSS，應用程序divs被迫出現在同一行（雖然在父div內仍有空間），並且要左對齊。這是你的浮動：左。假設你仍想在同一行上有多個應用程序div，但你希望它居中，最簡單的解決方案是將它們更改爲內嵌塊元素，然後利用內聯和內嵌塊元素響應CSS樣式「文本對齊：中心」。首先，更改CSS爲您的應用程序的div（去除浮動，加上顯示器）：

.app{ 
    width: 10%; 
    min-height: 100px; 
    text-align: center; 
    border: 1px solid black; 
    padding: 10px; 
    margin-left: 1.4%; 
    margin-top: 1.2%; 
    background-color: white; 
    border: 1px solid blue; 
    display: inline-block; 
}

然後你需要添加文本對齊：中心父元素：

.app-container{ 
    min-width: 15%; 
    max-width: 75%; 
    height: 590px; 
    margin: auto; 
    border: 1px solid green; 
    text-align: center; 
}

來源

2017-08-01 16:21:23 Andrea

HTML/CSS我如何使這個div的中心？

回答

相關問題