親セクション内に複数のdivを水平に整列する

Question

親セクション内にいくつかのdivがあり、div内がセクション内の中央にくるように整列しようとしています。彼らが今いるので、divは一直線に並んでいます。私はmargin: 0 autoをやってみましたが、うまくいきません。どのように私はこれを達成することができる誰も説明できますか？

Pen

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; 
 
}

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

Answer 1

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

と.iconからfloatを削除します。

Answer 2

「margin：0 auto;」を使用してください。浮動小数点なしで "text-align：center"と "display：inline-block;"を除いて