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的中心？

回答

相关问题