水平对齐父节内的多个div

我有一个父节内的几个div，我试图做一个对齐，使div在节中居中。就像他们现在一样，divs是左对齐的。我试过做margin: 0 auto但这不起作用。任何人都可以解释我怎么能做到这一点？水平对齐父节内的多个div

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>

来源

2017-04-05 Robert

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

并从.icon除去float。

来源

2017-04-05 20:45:06 vbulant

谢谢，我已更新我的代码以显示您所建议的更改并且它不起作用。 – Robert

适用于我：https://codepen.io/anon/pen/jBRjYW（顺便说一句，// CSS中的注释无效，请参阅链接的笔）。 – vbulant

这可能是因为我尝试过的评论或我的缓存。感谢您的帮助。 – Robert

只使用“margin：0 auto;”没有“text-align：center”而没有“display：inline-block;”，并且没有浮动

来源

2017-04-05 20:59:38

不幸的是，谢谢，这也不起作用。我更新了要显示的代码。 – Robert

它现在正在你的钢笔里正常工作......因为vbulant说你必须删除//评论！ –

水平对齐父节内的多个div

回答

相关问题