I have 2 boxes inside a div, and another 4 boxes in another div. I need them to be centered but cant-CodePudding

Is there a way I can put the 2 big boxes and the 4 smaller boxes in center without changing too much of the code? I tried align items, justify content, those don't seem to be working with the current code I have. Also tried to apply them to both the outer div and the boxes themselves, but I'm still lost

.header,
.navmenu {
  height: 50px;
  width: auto;
  border: 1px solid black;
  margin-bottom: 5px;
  list-style: none;
}

.bigbox {
  height: 200px;
  width: 300px;
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
}

.smallbox {
  height: 100px;
  width: 150px;
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
}

.footer {
  height: 75px;
  width: auto;
  border: 1px solid black;
}

<div >
  <p>header</p>
</div>
<div >
  <li>1</li>
  <li>2</li>
  <li>3</li>
</div>
<div >
  <div >
    <p>big box 1</p>
  </div>
  <div >
    <p>big box 2</p>
  </div>
</div>
<div >
  <div >
    <p>small box 1</p>
  </div>
  <div >
    <p>small box 2</p>
  </div>
  <div >
    <p>small box 3</p>
  </div>
  <div >
    <p>small box 4</p>
  </div>
</div>
<div >
  <p>footer</p>
</div>

CodePudding user response：

Use flex:

.header,
.navmenu {
  height: 50px;
  width: auto;
  border: 1px solid black;
  margin-bottom: 5px;
  list-style: none;
}
.twobixboxes, .foursmallboxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bigbox {
  height: 200px;
  width: 300px;
  border: 1px solid black;
  margin: 5px;
}
.smallbox {
  height: 100px;
  width: 150px;
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
}

.footer {
  height: 75px;
  width: auto;
  border: 1px solid black;
}

<div >
  <p>header</p>
</div>
<div >
  <li>1</li>
  <li>2</li>
  <li>3</li>
</div>
<div >
  <div >
    <p>big box 1</p>
  </div>
  <div >
    <p>big box 2</p>
  </div>
</div>
<div >
  <div >
    <p>small box 1</p>
  </div>
  <div >
    <p>small box 2</p>
  </div>
  <div >
    <p>small box 3</p>
  </div>
  <div >
    <p>small box 4</p>
  </div>
</div>
<div >
  <p>footer</p>
</div>

CodePudding user response：

You can use test-align. Add this in your CSS code:

.twobixboxes,
.foursmallboxes {
     text-align: center;
}

So this is your code:

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .header,
    .navmenu {
      height: 50px;
      width: auto;
      border: 1px solid black;
      margin-bottom: 5px;
      list-style: none;
    }
    
    .bigbox {
      height: 200px;
      width: 300px;
      border: 1px solid black;
      margin: 5px;
      display: inline-block;
    }
    
    .twobixboxes,
    .foursmallboxes {
      text-align: center;
    }
    
    .smallbox {
      height: 100px;
      width: 150px;
      border: 1px solid black;
      margin: 5px;
      display: inline-block;
    }
    
    .footer {
      height: 75px;
      width: auto;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div >
    <p>header</p>
  </div>
  <div >
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </div>
  <div >
    <div >
      <p>big box 1</p>
    </div>
    <div >
      <p>big box 2</p>
    </div>
  </div>
  <div >
    <div >
      <p>small box 1</p>
    </div>
    <div >
      <p>small box 2</p>
    </div>
    <div >
      <p>small box 3</p>
    </div>
    <div >
      <p>small box 4</p>
    </div>
  </div>
  <div >
    <p>footer</p>
  </div>
</body>

</html>

CodePudding user response：

Wrap this two boxex inner container and assign this container flex. The you can center it.

      .header,
      .navmenu {
        height: 50px;
        width: auto;
        border: 1px solid black;
        margin-bottom: 5px;
        list-style: none;
      }

      .bigbox {
        height: 200px;
        width: 300px;
        border: 1px solid black;
        margin: 5px;
        display: inline-block;
      }

      .smallbox {
        height: 100px;
        width: 150px;
        border: 1px solid black;
        margin: 5px;
        display: inline-block;
      }

      .footer {
        height: 75px;
        width: auto;
        border: 1px solid black;
      }

.foursmallboxes,.twobixboxes {  
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

  <body>
    <div >
      <p>header</p>
    </div>
    <div >
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </div>
    <div >
      <div >
        <div ><p>big box 1</p></div>
        <div ><p>big box 2</p></div>
      </div>
      
      <div >
        <div ><p>small box 1</p></div>
        <div ><p>small box 2</p></div>
        <div ><p>small box 3</p></div>
        <div ><p>small box 4</p></div>
      </div>      
    </div>


    <div >
      <p>footer</p>
    </div>

CodePudding user response：

.header,
  .navmenu {
    height: 50px;
    width: auto;
    border: 1px solid black;
    margin-bottom: 5px;
    list-style: none;
  }

  .bigbox {
    height: 200px;
    width: 300px;
    border: 1px solid black;
    margin: 5px;
    display: inline-block;
  }

  .smallbox {
    height: 100px;
    width: 150px;
    border: 1px solid black;
    margin: 5px;
    display: inline-block;
  }

  .twobixboxes, .foursmallboxes {
    display: flex;
    justify-content: center;
  }

  .footer {
    height: 75px;
    width: auto;
    border: 1px solid black;
  }

CodePudding user response：

so you need to select the wrapped / parent div which is .twobixboxes and .foursmallboxes and add a css rule of text-align: center; to it so that you can move them to the center, also if you want to use flexbox properties like align-items and justify-content be sure to add the css property of display:flex before using those other rules otherwise they would not work.

.header,
.navmenu {
  height: 50px;
  width: auto;
  border: 1px solid black;
  margin-bottom: 5px;
  list-style: none;
}

.bigbox {
  height: 200px;
  width: 300px;
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
  margin: 0 auto;
}

.smallbox {
  height: 100px;
  width: 150px;
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
}

.footer {
  height: 75px;
  width: auto;
  border: 1px solid black;
}

.twobixboxes,
.foursmallboxes {
  text-align: center;
}

Hope this helps :D

CodePudding user response：

Use flexbox. You can declare flexbox on body ( without changing your html) or wrap a div around boxes. If you declare flexbox on boy you should change your css this way:

  body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

Remember to fullwith header, nav and footer:

  .header, .navmenu, .footer {
    flex: 0 0 100%;
  }