How to Center a list of inline-block items, while aligning the content of the list to the Left?

Question

I have a list of inline-block elements inside a parent element. I wont to center the parent element while keeping the child elements aligned to the left.

<body>
  <style>
  /* the width of the container is dynamic by the width of the window */
  .container {
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  /* i don't know the width of the list element, it's only for centering */
  .list {
    text-align: left;
  }
  /* the width of the item is const - always 200px */
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>       
    </div>
  </div>
</body>

As you can see in the attached example, the list element isn't centered.
If I remove the align: left style then the list element will be centered but then the item elements will be centered as well (I want them to be aligned to the left)

This what I'm trying to achieve:

check this: https://stackoverflow.com/a/50718701/8620333 – Temani Afif Dec 17 '19 at 20:57 — Temani Afif, Dec 17 '19 at 20:57

score -1 · Answer 1 · answered Dec 17 '19 at 13:41

Some thing like this just give text-align: left; to item and remove text-align: center; from list

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  text-align: left;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>        
    </div>
  </div>
</body>

This doesn't solve the question! You can see that the last item is centered, while the question asked about how to center the list while the items are aligned to the left — Gil Epshtain, Dec 17 '19 at 14:43

Leo Melin · Answer 2 · 2019-12-18T06:36:03.493

What are you actually trying to achieve?

Now you have .container and .list that are both 600px wide, so you don't see if list element is aligned to left or center.

First, you should have different widths for .list and .container. Then your list should be an inline-block element for it to react to text-align: center.

I made a codepen for you to make this more clear: https://codepen.io/leo-melin/pen/MWYbLLa

.container {
    width: 800px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    display: inline-block;
    width: 500px;
    border: solid 1px #000; /* Added border to make it visual */
    text-align: left;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }

UPDATE 1

If I now understand you correctly, you have n-elements per row that are all 200px wide and you want to center them in container if there's not enough space to fit another 200px element. You want the last item to be aligned to left inside the container.

As in this another stackoverflow answer: https://stackoverflow.com/a/40936683/2061685 you probably need to utilize flexbox for that behaviour to work.

So something like this would do:

<div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
    </div>
  </div>

.container {
  width: 100%;
  height: 600px;
  border: 1px solid red;
  overflow-y: auto;
  text-align: center;
}

.list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}

.list:after {
  content: '';
  flex: auto;
}

.item {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 10px;
  background: gray;
}

.item.phantom {
  visibility: hidden;
  height: 0;
}

Working codepen: https://codepen.io/leo-melin/pen/gObgLrX

As you can see, you need to add those phantom items to make the last element stay on the left. On very wide screen with just a few items, you need to control the amount of phantom elements. Use mediaqueries or define an algorithm while rendering the items to make sure it works in all cases.

Hope this helps now for you to figure out a solution.

The container element will resize depending on the window size. The list element is just for centering. I don't know the width of the list element - it's depending on how many item element it contains on the x-axis. — Gil Epshtain, Dec 17 '19 at 13:49
I don't understand your problem then. In your code your container element doesn't resize depending on window size, it is fixed to 600px. Also your list element doesn't define size and it's width doesn't depend on how many item elements it contains: It IS 100% of the container element. Please provide the missing code that makes container element resize and explain your problem better. — Leo Melin, Dec 17 '19 at 16:11
I've updated the question and added a picture, hopefully it will be more clear now — Gil Epshtain, Dec 17 '19 at 17:03

score -1 · Answer 3 · answered Dec 17 '19 at 14:56

make all items fit the width of the list either by putting a fixed width to list or edit the width of item to have less than 50% of list, .item{width: 46%;} worked well

.container {
   width: 600px;
   height: 900px;
   border: 1px solid red;
   overflow-y: auto;
}

.list {
   border: 1px solid #bbb;
   width: 445px;
   margin: 0px auto;
}

.item {
   text-align: left;
   display: inline-block;
   width: 200px;
   height: 200px;
   margin: 10px;
   background: gray;
}

<body>
  <div class="container">
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</body>

I don't know the width of the `list` element. It's there only for centering. The `item` element has static width, while the outer `container` will resize with the window. If it's a widescreen then there will be more than 2 items in a row. — Gil Epshtain, Dec 17 '19 at 14:59
Because `container` has a fixed width, it's children will inherit the same width which will be defined by the browser as 100% of the parent by default. So `list` will have the same width as `container`. — DohaHelmy, Dec 17 '19 at 20:48

How to Center a list of inline-block items, while aligning the content of the list to the Left?

3 Answers3