How to center multiple divs inside divs

Question

This is what I am trying to doenter image description here But I cant align the items in the center of the container. I ve try margin: auto but it does not seem to work.

.containerfour {
  display: inline-block;
  margin: auto;
  
}

.configmini{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.configmini2{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.configone {
  margin-top: 100px;
  font-weight: bold 900;
  font: bold 55px/58px Nunito Sans;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppercase;
  opacity: 1;

}
.configoneS {

  width: 100px;
  height: 22px;
  color: var(--unnamed-color-ff6f3d);
  text-shadow: 0px 0px 20px var(---fbf9f4);
  text-align: center;
  font: normal normal bold 16px/73px Nunito Sans;
  letter-spacing: 0px;
  color: #ff6f3d;
  text-shadow: 0px 0px 20px #fbf9f4;
  opacity: 1;
}

.configoneH {

  margin-top: 20px;
  width: 400px;
  height: 138px;
  color: var(--unnamed-color-404041);
  text-align: center;
  font: normal normal normal 35px/40px Nunito Sans Black;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppe;
}

.buttonconfo {
 
  margin-top: 5px;
  text-align: center;
  font: normal normal normal 10px/30px Nunito Sans Black;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  background: var(--unnamed-color-ff6f3d) 0% 0% no-repeat padding-box;
  background: #ff6f3d 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
}
.buttonconfo :hover {
  cursor: pointer;
  color: #404042;
}

      <div class="containerfour">
        <div class="configmini"></div>
          <img class="configone" src="img/config_1.svg">
          <p class="configoneS">Sustainability</p>
          <h2 class="configoneH">How much can your country save with refour?</h2>
          <button  class="buttonconfo">Read more</button>
        </div>
                <div class="image">
          <div class="configmini2">
            <img class="configone" src="img/config_2.svg">
            <p class="configoneS">Material</p>
            <h2 class="configoneH">How much can your country save with refour?</h2>
            <button  class="buttonconfo">Read more</button>
          </div>
        </div>
      </div>

You don't have a container that encapsulate both divs, either put them in one or use the body element, and add `display:flex;justify-content:center;` — Rainbow, Aug 08 '21 at 11:09

score 0 · Answer 1 · answered Aug 08 '21 at 11:09

You can use flexbox and change as:

.containerfour,
.configmini2 {
  /* display: inline-block; */
  /* margin: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

I've wrapped both elements in the wrapper

<div class="wrapper">
...
</div>

.wrapper {
  display: flex;
  align-items: center;
}

.wrapper>* {
  flex: 1;
}

.containerfour,
.configmini2 {
  /* display: inline-block; */
  /* margin: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.configmini {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.configmini2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.configone {
  margin-top: 100px;
  font-weight: bold 900;
  font: bold 55px/58px Nunito Sans;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppercase;
  opacity: 1;
}

.configoneS {
  width: 100px;
  height: 22px;
  color: var(--unnamed-color-ff6f3d);
  text-shadow: 0px 0px 20px var(---fbf9f4);
  text-align: center;
  font: normal normal bold 16px/73px Nunito Sans;
  letter-spacing: 0px;
  color: #ff6f3d;
  text-shadow: 0px 0px 20px #fbf9f4;
  opacity: 1;
}

.configoneH {
  margin-top: 20px;
  width: 400px;
  height: 138px;
  color: var(--unnamed-color-404041);
  text-align: center;
  font: normal normal normal 35px/40px Nunito Sans Black;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppe;
}

.buttonconfo {
  margin-top: 5px;
  text-align: center;
  font: normal normal normal 10px/30px Nunito Sans Black;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  background: var(--unnamed-color-ff6f3d) 0% 0% no-repeat padding-box;
  background: #ff6f3d 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
}

.buttonconfo :hover {
  cursor: pointer;
  color: #404042;
}

<div class="wrapper">
  <div class="containerfour">
    <div class="configmini"></div>
    <img class="configone" src="img/config_1.svg">
    <p class="configoneS">Sustainability</p>
    <h2 class="configoneH">How much can your country save with refour?</h2>
    <button class="buttonconfo">Read more</button>
  </div>
  <div class="image">
    <div class="configmini2">
      <img class="configone" src="img/config_2.svg">
      <p class="configoneS">Material</p>
      <h2 class="configoneH">How much can your country save with refour?</h2>
      <button class="buttonconfo">Read more</button>
    </div>
  </div>
</div>
</div>

score 0 · Answer 2 · edited Aug 08 '21 at 11:11

0

Have the container be like this

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <img class="configone" src="img/config_1.svg">
  <p class="configoneS">Sustainability</p>
  <h2 class="configoneH">How much can your country save with refour?</h2>
  <button class="buttonconfo">Read more</button>
</div>

edited Aug 08 '21 at 11:11

DecPK

24,537
6
26
42

answered Aug 08 '21 at 11:11

Mohaimin

664
4
10

It would be easy for OP to just `Run code snippet` and try if it is exactly what OP wants. So make it runnable if you could – DecPK Aug 08 '21 at 11:12

How to center multiple divs inside divs

2 Answers2