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左侧有浮动。有人有很好的解决方案吗？也许有边距或最小宽度的东西？我不知道。

Answer 1

使用当前的CSS，app div被强制显示在同一行（虽然在父div中仍有空间），并且是左对齐的。那是你的浮动：左。假设您仍然希望在同一行上有多个app div，但是您希望它居中，最简单的解决方案是将它们更改为内联块元素，然后利用内联块和内联块元素响应CSS的事实style“text-align：center”。首先，更改app 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;
}

然后你需要将text-align：center添加到父元素：

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

HTML / CSS如何在div的中心进行此操作？

1 个答案: