How to align 3 boxes in the center

Question

I've done it before, but for some reason I can't figure it out now no matter what I try. Trying to align these 3 boxes in the center, in a row. They are lined up in a row, but I can't get them to center.

.box{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: skyblue;
}
.box1{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: red;

}
.box2{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: orange

 }

<div class="contact">
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
 </div>

score 0 · Answer 1 · answered May 02 '19 at 02:28

0

Give your contact div a width and margin: auto;:

.contact {
width: 600px; // should be 3 * 180 + 2 * 5em 
margin: auto;
}

Alternatively you can use flex-box instead of floats.

answered May 02 '19 at 02:28

Anima-t3d

3,431
6
38
56

score 0 · Answer 2 · answered May 02 '19 at 02:33

To avoid having to worry about setting a width, you can simply set display: inline-block on the container (.contact), and text-align: center on the container's parent (in this case, body).

This can be seen in the following (run the code snippet, then view it full page):

.box {
  margin: 0 auto;
  margin: 5em;
  float: left;
  width: 180px;
  height: 180px;
  background: skyblue;
}

.box1 {
  margin: 0 auto;
  margin: 5em;
  float: left;
  width: 180px;
  height: 180px;
  background: red;
}

.box2 {
  margin: 0 auto;
  margin: 5em;
  float: left;
  width: 180px;
  height: 180px;
  background: orange
}

.contact {
  display: inline-block;
}

body {
  text-align: center;
}

<div class="contact">
  <div class="box"></div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

score 0 · Accepted Answer · answered May 02 '19 at 02:38

Remove all float:left and add this CSS

 .box,.box1, .box2 {
   display: inline-block;
 }
 .contact {
   text-align: center;
 }

This should work

.box{
    margin: 0 auto;
    margin: 2em;
    
    width: 80px;
    height: 80px;
    background: skyblue;
}
.box1{
    margin: 0 auto;
    margin: 2em;

    width: 80px;
    height: 80px;
    background: red;

}
.box2{
    margin: 0 auto;
    margin: 2em;

    width: 80px;
    height: 80px;
    background: orange

 }
 .box,.box1, .box2 {
   display: inline-block;
 }
 .contact {
   text-align: center;
 }

<div class="contact">
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
 </div>

score 0 · Answer 4 · answered May 02 '19 at 02:47

Just set display attribute to inline-flex for contact class :

.contact{
   display: inline-flex;
 }

Below is the snippet example

.box{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: skyblue;
}
.box1{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: red;

}
.box2{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: orange

 }
 .contact{
   display: inline-flex;
 }

<div class="contact">
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
 </div>

This is the JSFiddle

score 0 · Answer 5 · answered May 02 '19 at 04:27

You can use display: flex css properties as below. This should be cross-browser compatible as well. This ensures the boxes are centered vertically and horizontally.

.contact {
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -webkit-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.box,
.box1,
.box2 {
margin: 0 auto;
margin: 5em;
width: 180px;
height: 180px;
}
.box{
background: skyblue;
}
.box1{
background: red;
}

.box2{
background: orange
 }

    <div class="contact">
            <div class="box"></div>
            <div class="box1"></div>
            <div class="box2"></div>
     </div>

How to align 3 boxes in the center

5 Answers5