水平對齊父節內的多個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

回答

相關問題