How to center align divs inside the parent container?

Question

There is an issue with the first three divs which contains other elements in it. If I remove them, then it is working fine but not otherwise. See Output Here

.results{
  text-align: center;
}
.result-box{
  width: 200px;
  height: 250px;
  background-color: red;
  margin: 10px;
  padding: 5px;
  display: inline-block;
}

<div class="wrapper">
  <div class="results">
    <div class="result-box"><p>Hello</p><p>World</p></div>
    <div class="result-box"><p>Nothing</p></div>
    <div class="result-box"><p>Everything</p></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
  </div>
</div>

Use `flexbox` to achieve it – Abin Thaha Aug 20 '21 at 05:33 — Abin Thaha, Aug 20 '21 at 05:33

score 2 · Answer 1 · answered Aug 20 '21 at 05:50

best solution for collect divs inside a container is using flex (display:flex) or gird (display:gird) witch grid is not working correctly in old browser ( internet explorer)

but if you don't like to use these methods here is a tricky way

.results{
  text-align: center;
  position:relative;
}
.result-box{
  width: 200px;
  height: 250px;
  background-color: red;
  margin: 10px;
  padding: 5px;
  display: inline-block;
  float:left;
}

<div class="wrapper">
  <div class="results">
    <div class="result-box"><p>Hello</p><p>World</p></div>
    <div class="result-box"><p>Nothing</p></div>
    <div class="result-box"><p>Everything</p></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
  </div>
</div>

score 1 · Answer 2 · answered Aug 20 '21 at 05:36

Check the below snippet

.results{
  text-align: center;
  display: flex;
  justify-content: center;
}
.result-box{
  width: 50px;
  height: 150px;
  background-color: red;
  margin: 10px;
  padding: 5px;
  display: inline-block;
}

<div class="wrapper">
  <div class="results">
    <div class="result-box"><p>Hello</p><p>World</p></div>
    <div class="result-box"><p>Nothing</p></div>
    <div class="result-box"><p>Everything</p></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
  </div>
</div>

I don't want to shrink the size of result-box. I want it that to be on the next line when the width of window reduces. That's why I was not using flex property. — Muhammad Muneeb Ur Rahman, Aug 20 '21 at 05:53

How to center align divs inside the parent container?

2 Answers2