0

I have what seems like a simple CSS question but has been rather vexing for me as a styles newbie. Any help is really appreciated. I tried to find another example on Stack Overflow and couldn't which surprised me, so if this is a dupe pls point me in the right direction.

I have a container element that contains some text and a list of elements with fixed dimensions.

  <div class='container'>
    <p> Title </p>
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
  </div>

I don't know how many items I will actually have - it might be 3 - 9. I want the container to be centered on the page and the heading to be centered above the items, but I want the items to be added left to right. I want the items to align left so that they appear centered under the heading and on the page when the row is full, but should appear from left to right if a row is not full. So if the screen can fit three and there are four, the fourth should align with the first element and not be in the middle.

.container {
  margin: 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

p {
 margin: 0 auto;
 text-align: center;
 justify-content: center;
 align-self: center;
 display: block;
}

.item {
  flex: none;
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 20px;
}

The issue I'm having is that I can center the text, but because the width of the parent is not based on the width of the children, it always appears slightly off center. So, I read that I can force the parent's width to be based on the children's width by setting display: inline-flex on the parent. This accomplishes that, but unfortunately that then forces the heading to be in-line with the items, which defeats the purpose. The only reason I need the width of the parent to be calculated based on children's width is so that the text will know how to center itself inside the parent.

Any help would be really appreciated. I don't need to use flexbox - any other approach that works would be great...this is just the latest in a series of different things I've tried.

Leigh Scherrer
  • 123
  • 2
  • 7
  • Based on the duplicates, here is a fiddle demo matching your markup using _ghost_ elements to keep elements on last row left aligned: https://jsfiddle.net/xtqw6o2e/ – Asons Oct 07 '17 at 23:55

1 Answers1

1

If i understood the question correctly, you were on the right track, setting display:block on the p was a good idea, but you also need to set width:100% so it won't stay inline with the other items.

See below or jsFiddle

.container {
  margin: 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

p {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-self: center;
  display: block;
}

.item {
  flex: none;
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 20px;
}
<div class='container'>
  <p> Title </p>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • you can even clean up the CSS : https://jsfiddle.net/5cm7qu22/1/ ;) – G-Cyrillus Oct 07 '17 at 20:56
  • Thank you for your quick reply! This did break the

    onto its own line but unfortunately, the p still isn't centered above the items because the width of the container is the width of it's container rather than the width of its children. I don't know why because in this example, it works: https://stackoverflow.com/questions/33722001/how-can-i-make-a-flexbox-parent-have-the-width-of-its-children Perhaps some of my other styling is preventing the inline-flex on the parent to exhibit this property?

     – Leigh Scherrer Oct 07 '17 at 21:00
  • @LeighScherrer maybe it has to do with the inline-flex behavior and fixed width of children . add a border or a background to the parent to see where it stands https://jsfiddle.net/5cm7qu22/3/ Eventually try a min-width on children if that fits better the requirements https://jsfiddle.net/5cm7qu22/2/ . justify-content could also be an option https://jsfiddle.net/5cm7qu22/4/ – G-Cyrillus Oct 07 '17 at 21:19