页脚导航未居中

Question

我无法使页脚导航正确居中。这很简单，但只是没有做它应该做的事情。

.main-footer li {
float: left;
font-size: 0.85em;
padding: 0 0.5em;
margin-bottom: 0.5em;
}
.main-footer {
text-align: center;
width: 100%;
background-color: lightblue;
padding: 2em;
margin-top: 30px;
}

<footer class="main-footer">
<ul>
<li><a href="#">Contact us</a></li>
<li>&copy; Copyright Acme Industries 2019</li>
</ul>
</footer>

我尝试在两个 css 选择器中添加display: block或display: inline-block，但没有帮助。有什么想法吗？

谢谢，凯特

Answer 1

首先。切勿将float用于布局目的。它会弄乱您的内容，并在您的 CSS 中开始滚雪球效应。

flex是要走的路->flexbox MDN(和其他链接(

使用align-items: center垂直对齐项目，justify-content: center水平对齐项目。

此外，请使用box-sizing: border-box，以便页脚的填充将"包含"在其100%宽度中，并且您在 x 轴上没有滚动溢出。

.main-footer li {
font-size: 0.85em;
padding: 0 0.5em;
margin-bottom: 0.5em;
display: inline-block;
}
.main-footer {
display: flex;
align-items:center;
justify-content: center;
text-align: center;
width: 100%;
background-color: lightblue;
padding: 2em;
margin-top: 30px;
box-sizing:border-box;
}

<footer class="main-footer">
<ul>
<li><a href="#">Contact us</a></li>
<li>&copy; Copyright Acme Industries 2019</li>
</ul>
</footer>

Answer 2

尝试使用flexbox：

.main-footer {
display: flex;
justify-content: center;
width: 100%;
background-color: lightblue;
padding: 2em;
margin-top: 30px;
}
.main-footer li {
float: left;
font-size: 0.85em;
padding: 0 0.5em;
margin-bottom: 0.5em;
}

<footer class="main-footer">
<ul>
<li><a href="#">Contact us</a></li>
<li>&copy; Copyright Acme Industries 2019</li>
</ul>
</footer>

Answer 3

使用 float，您可以强制将元素向左拉动。 使用 display：inline-block 使元素居中，因为父元素已经是文本对齐：中心

.main-footer li {
display: inline-block;
font-size: 0.85em;
padding: 0 0.5em;
margin-bottom: 0.5em;
list-style-type:none
}
.main-footer {
text-align: center;
width: 100%;
background-color: lightblue;
padding: 2em;
margin-top: 30px;
}

<footer class="main-footer">
<ul>
<li><a href="#">Contact us</a></li>
<li>&copy; Copyright Acme Industries 2019</li>
</ul>
</footer>

Answer 4

如果您不想采用弹性方式，只需更改 UL 元件的显示属性即可。

像这样：

.main-footer ul {
display: inline-block;
margin: 0;
padding: 0;
}
.main-footer li {
float: left;
font-size: 0.85em;
padding: 0 0.5em;
list-style-type: none;
}
.main-footer {
text-align: center;
width: 100%;
background-color: lightblue;
padding: 2em 0;
margin-top: 30px;
}

<footer class="main-footer">
<ul>
<li><a href="#">Contact us</a></li>
<li>&copy; Copyright Acme Industries 2019</li>
</ul>
</footer>

Answer 5

将ul设置为弹性容器，并从footer容器中删除左右填充以确保其居中。可以改为将填充添加到ul。

如果没有弹性框，请将li元素设置为display: inline-block。

.main-footer {
width: 100%;
background-color: lightblue;
padding: 2em 0;
margin-top: 30px;
}
.main-footer ul {
display: flex;
justify-content: center;
list-style: none;
}
.main-footer li {
font-size: 0.85em;
margin-right: 0.5em;
}
.main-footer li:last-child {
margin-right: 0;
}

<footer class="main-footer">
<ul>
<li><a href="#">Contact us</a></li>
<li>&copy; Copyright Acme Industries 2019</li>
</ul>
</footer>