-1

I have an html page called presets page. This page contains different (child) divs and I am having a hard time on how I could center all these divs within the container (parent) div. These preset divs are currently in flexbox. Apologies if this question has been answered already, I really suck in centering elements in html/css.

It currently looks like this.

And I want it to look somewhat like this.

I tried using justify-content: center but how can I make the last line align to the left/right to look like this?

Here is the HTML:

<div class="presets-container">
  {% for presets in presets_list %}
  <div class="preset">
    <div class="container">
      <div class="row" id="header">
        <div class="col-7">
          <h1>{{ presets.preset_name|hide_preset_suffix }}</h1>
        </div>
        <div class="col-5">
          <div class="options">
              <div style="cursor:pointer;" class="button pr_edit" id="{{ 'load,'|create_id:forloop.counter }}" onclick="loadPreset(this.id)">LOAD</div>
              <div style="cursor:pointer;" class="button pr_edit" id="{{ 'delete,'|create_id:forloop.counter }}" onclick="deletePreset(this.id)">DELETE</div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endfor %}
</div>

Here is the CSS for the presets container:

.presets-container{
  background-color: pink;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
pdr.ix
  • 49
  • 1
  • 4
  • please add your code to question – Hien Nguyen May 19 '20 at 09:05
  • 2
    To center horizontally `justify-content: center` and vertically `align-items: center`, Default value for `flex-direction` is `row` so you don't need to specify – Sameer May 19 '20 at 09:07
  • Hello, After seeing your screenshot your requirement is to add equal margins around the content so use `justify-content: space-around` – MD M Nauman May 19 '20 at 09:10

3 Answers3

4

Add justify-content: center and align-items: center to the parent div

.presets-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: pink;
  justify-content: center;
}
Joshua
  • 589
  • 1
  • 5
  • 19
2

You can use justify-content: center

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • How do I make the last line align to the left and not make it center? Check last edit :) – pdr.ix May 19 '20 at 09:22
  • Unfortunately that's an unsolved problem ;-) , i.e. not easily possible. You'd have to use a container within the container which is only wide enough for the three columns and which you center inside its parent (using the default `justify-content: flex-start`) inside it - usually rather too complicated... – Johannes May 19 '20 at 09:28
0

Just add a div under presets-container and then use justify-content: center in presets-container

Mehedi Hasan
  • 26
  • 4