HTML/CSS 我怎样才能在 div 的中心做这个？

Question

我的 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-container 的中心？现在这个 .app-container 的左侧有 float 。有人有好的解决方案吗？也许有边距或最小宽度的东西？我不知道。

Answer 1

使用当前的 CSS，应用程序 div 被强制显示在同一行(同时它们在父 div 中仍有空间)，并且是左对齐的。那是你的 float :左。假设您仍然希望在同一行上有多个应用程序 div，但您希望它居中，最简单的解决方案是将它们更改为 inline-block 元素，然后利用 inline 和 inline-block 元素响应 CSS 的事实样式“文本对齐:居中”。首先，更改应用 div 的 CSS(删除 float ，添加显示):

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

然后需要在父元素上加上text-align:center:

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