页面中间的中心页脚

Question

我无法将页脚 () 置于页面中央。我能够让它留在页面底部，但不能居中。

我在#footer 中添加了left: 50%，但它对齐得太靠右了。此外，<hr> 标签只是运行其下方文本的范围。当我将它从 div 中取出时，它漂浮在页面中间。关于如何将其居中的任何想法（最好使用 %，因为我会将其嵌入到具有不同对齐设置的另一个页面中）。

这是一个link：http://jsbin.com/fajosekosu/2/edit

非常感谢您的意见。

<!DOCTYPE html>
<html>
<head>

<style>

body {
    width: 100%;
    height: 100%;
    text-align:center;
    margin: 0 auto;
}

#footer {
    text-align:center;
    margin: 0 auto;
    position:fixed;
    bottom:0;
    left: 50%;

}

a {
    text-decoration: none;
    color: black; 
    padding-right: 20px;
    padding: 15px;
    list-style: none;
    display: inline-block;
}

a:hover {
    color: white;
}

</style>
  <meta charset="utf-8">
  <title>Footer</title>
  <link type="text/css" rel="stylesheet" href="/LESSON5/5_Signup_CSS.css">

</head>
<body>

    <div id="footer">
    <hr>
    <footer>
        <a href="/LESSON5/1%20-%20LOGIN.php">Login</a>
        <a href="/LESSON5/2%20-%20CREATE%20AN%20ACCOUNT.php">Create Account</a>
        <a href="/LESSON5/3%20-%20HOMEPAGE%20:%20WELCOME.php">Homepage</a>
        <a href="/LESSON5/4%20-%20LOGOUT%20PAGE.PHP">Logout</a>
    </footer>
</div>

</body>
</html>

Answer 1

您可以使用 margin-left 将其从左边的 50% 调回来。只需将此添加到您的页脚：

margin-left: -190px;
left: 50%;

190 是页脚宽度的一半。

不过，实际上，完成此过程的更好方法是修复页脚容器并将其中的元素包装在 div 中。使 div 成为内联块并将其居中。此外，您的页脚元素应该是包装元素。

HTML:

  <footer>
    <div class="footer-contents">
    <hr>
        <a href="/LESSON5/1%20-%20LOGIN.php">Login</a>
        <a href="/LESSON5/2%20-%20CREATE%20AN%20ACCOUNT.php">Create Account</a>
        <a href="/LESSON5/3%20-%20HOMEPAGE%20:%20WELCOME.php">Homepage</a>
        <a href="/LESSON5/4%20-%20LOGOUT%20PAGE.PHP">Logout</a>
    </div>
  </footer>

CSS:

footer {
    width: 100%;
    position:fixed;
    bottom:0;
}

.footer-contents{
  display: inline-block;
}

Answer 2

添加到页脚 css

width: 100%;

Answer 3

在#footer 添加：

     left:0;
     right:0;

Answer 4

只需添加

width: 100%;

您的 #footer 规则：

http://jsbin.com/guxovaloci/2/edit?html,css,output

或者，如果您想要 100% 以外的指定宽度，请使用

left: 0;
right: 0;

页面中间的中心页脚

Center Footer in Middle of page

html

css

footer