html - 页面中间的中心页脚

标签 html css footer

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

我添加了 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>

最佳答案

添加到页脚 css

width: 100%;

关于html - 页面中间的中心页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30466487/

相关文章:

html - 可以为我的 bootstrap 4 旋转木马图像着色

jquery - 淡入/淡出(显示/隐藏)带有侧边导航链接的 div

html - 持久性页眉和页脚

css - chrome 上 prestashop 主题的页脚问题

html - 文本/标题中的内联列表

jquery 不能在具有 id 的 div 中工作

javascript - 动态添加具有拖动和调整大小功能的 DIV

javadoc - 将 "Last Modified"时间戳插入 javadoc 页脚

html - R 中的网页抓取 html

html - CSS 元素符号布局向左一点