时间戳

首页 > 解决方案 > 如何在中心对齐 3 个框

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

问题描述

我以前做过，但由于某种原因，无论我尝试什么，我现在都无法弄清楚。尝试将这 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>

标签： htmlcss

解决方案

您可以使用 display: flex css 属性，如下所示。这也应该是跨浏览器兼容的。这确保了盒子垂直和水平居中。

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

推荐阅读