Mehrere Divs innerhalb eines Elternteils horizontal ausrichten

Question

Ich habe ein paar divs in einem Elternteil und ich versuche eine Ausrichtung zu machen, so dass die divs innerhalb des Ausschnitts zentriert sind. Wie sie gerade sind, sind die Divs linksbündig. Ich habe versucht, margin: 0 auto zu tun, aber das funktioniert nicht. Kann mir jemand erklären, wie ich das erreichen könnte?

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

und entfernen float vom .icon.

Answer 2

Verwenden Sie einfach "margin: 0 auto;" ohne "text-align: center" und ohne "display: inline-block;" und ohne float