HTML/CSSこれをdivの中心にするにはどうすればよいですか？

Question

MY 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をするdiv .APP-コンテナの中心になることができますが？今、この.app-containerの左側にフロートがあります。 誰かが良い解決策を持っていますか？おそらくマージンや幅のあるものでしょうか？知りません。

Answer 1

現在のCSSでは、アプリdivは同じ行に表示されます（ただし、親div内にまだ余裕があります）。また、左揃えにする必要があります。それはあなたのフロートです：左。 複数のアプリケーションdivを同じ行に配置したいが、その行を中央に配置したい場合は、インラインブロック要素に変更するのが最も簡単な解決策です。次に、インラインブロック要素とインラインブロック要素がCSSスタイル "text-align：center"。 まず、（ディスプレイを追加し、フロートを削除）アプリのdivのためのCSSを変更：

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