Question

我无法将页脚（）放在页面中央。我能够让它留在页面底部，但不是居中。

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

这是一个链接：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;

页面中间的中心页脚

4 个答案: