html - 如何在中心对齐3个框

This question already has answers here:

How do I center floated elements?
                                
                                    （12个答案）
                                
                        
                                在8个月前关闭。
            
                    
我以前做过，但是由于某种原因，无论我尝试什么，我现在都无法弄清楚。尝试将这3个框连续居中对齐。它们排成一排，但我无法使它们居中。

.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>

最佳答案

删除所有float:left并添加此CSS

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

这应该工作

.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>

关于html - 如何在中心对齐3个框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55944924/