使用CSS在flexbox中水平居中文本？

我正在嘗試爲網站製作導航欄。我試圖將我的鏈接文本水平放在div中。 text-align: center;沒有這樣做，也沒有和justify-content: center;。有小費嗎？使用CSS在flexbox中水平居中文本？

#nav { 
 
    display: flex; 
 
    flex-direction: row rtl; 
 
    border-top: 3px dotted #594027; 
 
    border-bottom: 3px dotted #594027; 
 
    width: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.navbox { 
 
    flex-wrap: wrap; 
 
    background-color: #594027; 
 
    width: 125px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 

 
.navbox a { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 3px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-decoration: none; 
 
}

<div id="nav"> 
 
<div class="navbox"> 
 
<a href="index.html">Home</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="resume.html">Resumé</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="coursework.html">Coursework</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="accomplishments.html">Accomplishments</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="experience.html">Experience</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="blog.html">Blog</a> 
 
</div> 
 

 
</div><!--nav->

來源

2016-11-12 Annie

添加「文本對齊：中心」到.navbox類。順便說一句，你不需要「保證金 - 右側」和「餘裕」「自動」。 –

此外，「Flex容器」的「Flex-wrap」es，不適用於flex容器內的元素，因此請將其從.navbox類中移除。 –

什麼不是你想要的？ –

您可以從母CONTROLE文本，爲您將需要添加text-align:center到#nav

#nav { 
 
    display: flex; 
 
    flex-direction: row rtl; 
 
    border-top: 3px dotted #594027; 
 
    border-bottom: 3px dotted #594027; 
 
    width: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* Add text-align to Parent */ 
 
    text-align:center; 
 
} 
 

 
.navbox { 
 
    flex-wrap: wrap; 
 
    background-color: #594027; 
 
    width: 125px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 

 
.navbox a { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 3px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-decoration: none; 
 
}

<div id="nav"> 
 
<div class="navbox"> 
 
<a href="index.html">Home</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="resume.html">Resumé</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="coursework.html">Coursework</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="accomplishments.html">Accomplishments</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="experience.html">Experience</a> 
 
</div> 
 
<div class="navbox"> 
 
<a href="blog.html">Blog</a> 
 
</div> 
 

 
</div><!--nav->

來源

2016-11-12 23:07:30

使用CSS在flexbox中水平居中文本？

回答

相關問題