为什么我的 css 代码没有将页面上的元素居中？答案

【问题标题】：Why my css code doesn't center the elements on the page?为什么我的 css 代码没有将页面上的元素居中？
【发布时间】：2015-06-15 08:00:21
【问题描述】：

我想将页面上的应用程序图标居中，但它们附加到左侧站点。此外，带有文本 © webservice 2015 - Terms and conditions | Privacy Policy 的页脚 - 我找不到将其居中放置的方法页面底部上方10px，你能帮我吗？ html代码为：

<footer>
            <div class="container">

                <div class="row">   
                        <ul class="footer-nav">
                            <li><a href="#todo1">
                          <img alt="and app"
                               src="img/app_android.png" />
                        </a></li>

                        <li><a href="#todo2">
                          <img alt="iOS app"
                               src="img/app_apple.png" />
                        </a></li>

                        <li><a href="#todo2">
                          <img alt="win app"
                               src="img/app_microsoft.png" />
                        </a></li>
                        </ul>
                        </div>
                        <div class="row">   
                    <p>© webservice 2015 - <a href="#">Terms and conditions</a> | <a href="#">Privacy Policy</a></p>
                </div>
            </div>
        </footer>

css代码是：

footer {
    padding: 50px 0
}
footer h1{
    color: #24374b;
    font-size: 16px;
}
footer p {
    color: #c7cacc;
    font-size: 12px;
}
footer ul {
    margin-top: 30px
}
footer li {
    float: none;
    display: inline-block;
    text-align: center;
    margin-right: 10%;
    text-transform: uppercase;
    font-weight: 400;
}
footer a {
    color: #08c;
}
footer a:hover{
    color: #c7cacc;
}
footer li:last-child {
    margin-right: 0
}

这是 jsfiddle --> http://jsfiddle.net/6q99awdf/

谢谢！

【问题讨论】：

您要居中的元素是什么？ .container, .row, .footer-nav?

标签： html css

【解决方案1】：

您需要将text-align: center; 提供给家长。所以把它从<li>带到<ul>：

footer ul {
    margin-top: 30px;
    text-align: center;
}
footer li {
    float: none;
    display: inline-block;
    margin-right: 10%;
    text-transform: uppercase;
    font-weight: 400;
}

小提琴：http://jsfiddle.net/mLambha8/

【讨论】：

【解决方案2】：

试试这个：

    ul, p{
    text-align:center;
    }

fiddle

【讨论】：

【解决方案3】：

您可以将 .text-center 引导类添加到您的行。所以它变成了

class="row text-center"

接下来，您需要在 CSS 中为“p”标签添加 "text-align: center"。

页脚在底部的位置取决于正文中的内容。如果您提到相对位置，它将位于您的正文内容旁边。

如果正文中的内容较少，但仍需要将其固定在底部位置，则在 css 下方到 footer 元素。

位置：绝对；
底部：10px;
填充：0px;

还有一个建议

【讨论】：

【解决方案4】：

您的文本对齐：居中；不适用于要居中的文本。

footer {
    text-align: center;
    padding: 50px 0;
}

小提琴：http://jsfiddle.net/hxxpz8xb/2/

【讨论】：