4
我试图用flexbox创建一个简单的页脚。但是我希望将文本块置于flexbox列中,而不是text-align: center
,但实际上将文本块居中放在列中。在flexbox列中水平居中文本
这里是一个的jsfiddle: https://jsfiddle.net/f2yb72c9/
HTML
<div class="row-flex--footer">
<div class="column">
<nav>
<h4 class="hl--list footer__hl">Company</h4>
<ul>
<li> <a class="footer__link">About us</a></li>
<li><a class="footer__link">Careers</a></li>
<li> <a class="footer__link">News</a></li>
</ul>
</nav>
</div>
<div class="column">
<nav>
<h4 class="hl--list footer__hl">Surgeons</h4>
<ul>
<li> <a class="footer__link">3D Business Manager</a></li>
<li><a class="footer__link">Plans & Pricing</a></li>
</ul>
</nav>
</div>
<div class="column">
<nav>
<h4 class="hl--list footer__hl">Patients </h4>
<ul>
<li> <a class="footer__link">Find a Crisalix surgeon</a></li>
<li><a class="footer__link">Community</a></li>
</ul>
</nav>
</div>
</div>
</footer>
CSS
ul{
list-style:none;
padding:0;
}
.row-flex--footer {
align-content: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
footer .column {
flex: 1 1 auto;
}
@media (min-width: 868px) {
footer .column {
flex: 1 1 33.333%;
}
}