Question

我在父节中有几个div，我试图进行对齐，以便div在节中居中。就像他们现在一样，div是左对齐的。我尝试过margin: 0 auto，但那不行。谁能解释我怎么能做到这一点？

＆＃13;

section {
  margin-bottom: 10px;
  width: 100vw;
  height: 100vh;
}

.notice {
  width: 50vw;
  height: 10vh;
}

section .socialmedia{
    background-color: red;
    width: 100vw;
    height: 15vh;
}
//The divs I'm trying to center
section .icon{
    margin: 0 auto;
    width: 15vw;
    height: 15vh;
    background-color: green;
}

＆＃13;

<section>
  <div class="notice">
    <h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
  </div>
  <div class="socialmedia">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
</section>

＆＃13;

Answer 1

.socialmedia { text-align: center; }
.icon { display: inline-block; }

并从float移除.icon。

Answer 2

只需使用“margin：0 auto;”没有“text-align：center”而没有“display：inline-block;”，没有float

在父节中水平对齐多个div

2 个答案: