CODEWITHSUNDEEP
htmlcss
Nedas Bolevičius
Nedas Bolevičius

Reputation: 321

Center div elements like text

I looked around but couldn't find something that works. I'd like to somehow center div elements that have class="box". Here is an example of how I would like it to be:

enter image description here

Can someone tell me how I would go about doing this? I have tried something that obviously wouldn't work but here is what I have so far:

body {
  background-color: rgb(32, 32, 36);
  height: 100%;
}
#main {
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  overflow: auto;
  height: 95vh;
  color: rgb(0, 0, 0);
}
.box {
  margin: auto 0;
  left: 25;
  right: 25;
  top: 25;
  bottom: 25;
  height: 160px;
  width: 140px;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
}
<body>
  <div id="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>

P.S. Don't just post code, please. I want to learn so please explain how it all works

Upvotes: 0

Views: 80

Answers (6)

the_angry_coder
the_angry_coder

Reputation: 1

Instead of using 0 margin in the left_right (the margin style of .box) try using 40%

use:

.box {
  margin: auto 40%;

instead of:

.box {
  margin: auto 0;

The percentage will keep 40% of the total width of the margin on each side. It is important to note though that if you change the width of the box class you will need to adjust the margins also.

Upvotes: 0

Brad
Brad

Reputation: 8668

Flexbox is great but it has its downsides, I prefer to stick to using float.

There a 2 new classes, box1 and box2 which have styles specific to the size of the box (you might want to look at using a grid system)

There is also a .clearfix class which is clears your floats.

I took the liberty of tidying various bits of your css that were not needed. If you want to know more let me know.

* {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
body {
  background-color: rgb(32, 32, 36);
}
#main {
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin: 0 auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border:3px solid rgb(20, 20, 26);  
  color: rgb(0, 0, 0);
}
.box {
  margin: 25px 0;
  height: 75px;
  border: 3px solid  rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
  float: left;
}
.box1 {
  width: 20%;
  margin-left: 10%;
}
.box1:nth-child(3) {
  margin-right: 10%;
}
.box2 {
  width: 35%;
  margin-left: 10%;
}
.box2:nth-child(2) {
  margin-right: 10%;
}
<body>
  <div id="main" class="clearfix">
    <div class="box box1"></div>
    <div class="box box1"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box2"></div>
    <div class="box box1"></div>
    <div class="box box1"></div>
    <div class="box box1"></div>
  </div>
</body>

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use CSS Flexbox. Make your #main parent div display: flex & justify-content: space-between. And then accordingly give your width to box. Like:

#main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 30%;
}

.box:nth-child(4),
.box:nth-child(5) {
  width: 45%;
}

Have a look at the snippet below (use full view for better understanding):

body {
  background-color: rgb(32, 32, 36);
  height: 100%;
}
#main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  overflow: auto;
  height: 95vh;
  color: rgb(0, 0, 0);
}

.box {
  margin: 10px 0;
  left: 25;
  right: 25;
  top: 25;
  bottom: 25;
  height: 160px;
  width: 30%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
}

.box:nth-child(4),
.box:nth-child(5) {
  width: 45%;
}
<body>
  <div id="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>

Hope this helps!

Upvotes: 1

Andrew Bone
Andrew Bone

Reputation: 7291

With flexbox, you can justify-content: space-around; and flex-wrap: wrap; this means evenly space elements along a line and if the line has too much on it start a new line.

Here is some more resources and example about flexbox

I've made a simple example below.

body {
  margin: 0;
}
#wall {
  background: #bed6e2;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.brick {
  width: calc(100%/9);
  height: 65px;
  background: #ab837b;
  border: 1px solid #222;
  border-radius: 3px;
  margin: 2px 0;
}
.brick.wide {
  width: calc((100% / 9) * 3);
}
<div id="wall">
  <div class="brick wide"></div>
  <div class="brick wide"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick wide"></div>
  <div class="brick wide"></div>
  <div class="brick wide"></div>
  <div class="brick"></div>
  <div class="brick wide"></div>
  <div class="brick"></div>
</div>

Hope this is helpful.

Upvotes: 1

pradeep1991singh
pradeep1991singh

Reputation: 8375

Updated answer

Try to use display: flex to parent container and if you want wrap content to second line then use flex-wrap: wrap.

body {
  background-color: rgb(32, 32, 36);
  height: 100%;
}
#main {
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  overflow: auto;
  height: 95vh;
  color: rgb(0, 0, 0);
}

.container {
  display: flex;
  justify-content: space-between;
}

.container_second .box {
  width: 180px;
}

.box {
  margin: auto 0;
  left: 25;
  right: 25;
  top: 25;
  bottom: 25;
  height: 160px;
  width: 140px;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
}
<body>
  <div id="main">
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="container container_second">
      <div class="box"></div>
      <div class="box"></div>
    </div>  
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div> 
  </div>
</body>

For complete reference on flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Jon Uleis
Jon Uleis

Reputation: 18649

div elements have the property display: block by default. Block-level elements automatically begin on a new line, but adding the attribute display: inline-block on .box will let the elements exist on the same line. Applying text-align: center to the container holding your .boxes (which is #main) will center the inline-blocks inside.

Alternatively, you could apply display: flex to #main which will automatically manage the position of all elements inside (by default, in a row). You can customize this extensively without needing additional styles on .box. Read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions