Search code examples
htmlcsscenter

HTML/CSS How can I make this on center of div?

my problem THERE

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>

AND THERE IS CSS:

https://paste.ofcode.org/eCENzdgqewVd9AWbNAe45u

HOW can I make these .app divs be on center of div .app-container? Now there are float to left side of this .app-container. Someone has good solution? Maybe something with margins or min-width? I don't know.

Solution

  • With the current CSS, the app divs are being forced to appear on the same line (while there is still room for them within the parent div), and to be left-aligned. That's your float: left. Assuming you still want to have multiple app divs on the same row, but you want it centered, the easiest solution is to change them to inline-block elements, then take advantage of the fact that inline and inline-block elements respond to the CSS style "text-align: center". First, change the CSS for your app divs (remove the float, add display):

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

    Then you need to add text-align:center to the parent element:

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