使用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中水平居中文本？

回答

相关问题