位置绝对和边距：自动 [英] Position absolute and margin: auto
本文介绍了位置绝对和边距：自动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个小问题，我想让我的页脚留在屏幕底部 position：absolute 。但是我的 margin：auto 把它放在屏幕的中间是不工作了。
html：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv ='Content-Type'content ='Type = text / html; charset = utf-8'>
< link rel =shortcut iconhref =../ IMAGES / favicon.ico>
< title> TEST< / title>
< link href ='http：//fonts.googleapis.com/css？family = Source + Sans + Pro'rel ='stylesheet'type ='text / css'>
< link rel =stylesheethref =../ css / stylesheet.css>
< / head>
< body>
< div id =header>
< div id =logo>
< img src =../ IMAGES / logo.png/>
< / div>
< div id =logotitel>
Den AllerstrafsteFul-AmbiLive-Band van groot安特卫普en omstreken！
< / div>
< / div>
< div id =nav>
< div id =links>
< a href =index.php>< div class =link>首页< / div>< / a>
< a href =wie.php>< div class =link> Wie is wie< / div>< / a>
< a href =fotos.php>< div class =link>照片< / div>< / a>
< a href =repertoire.php>< div class =link> Repertoire< / div>< / a>
< a href =links.php>< div class =link>链接< / div>< / a>
< a href =contact.php>< div class =link>联系< / div>< / a>
< / div>
< / div>
< div class =clear>< / div>
< div id =content>
TEST
< / div>
< div class =clear>< / div>
< div id =footer>
< div id =copy>
开发者：Yoshi& copy vAntstAd
< / div>
< / div>
< / body>
< / html>
CSS：
code> / * PAGE LAYOUT * /
html
{
padding：0px;
margin：0px;
}
body
{
background-image：url（../ IMAGES / background.png）;
padding：0px;
margin：0px;
color：white;
font-family：'Source Sans Pro'，serif，sans-serif;
}
.clear
{
clear：both;
}
/ * HEADER * /
#header
{
width：1100px;
height：150px;
background-color：＃282828;
margin：auto;
border-bottom：solid;
border-color：red;
}
#logo
{
width：283px;
height：100px;
margin：auto;
}
#logotitel
{
width：1100px;
height：50px;
line-height：50px;
text-align：center;
font-size：x-large;
}
/ * NAV * /
#nav
{
width：1100px;
height：50px;
margin-top：25px;
margin-right：auto;
margin-left：auto;
margin-bottom：25px;
background-color：red;
}
#links
{
width：600px;
height：50px;
margin：auto;
}
.link
{
width：100px;
height：50px;
line-height：50px;
float：left;
text-align：center;
color：white;
text-decoration：none;
}
.link：hover
{
color：＃282828;
text-decoration：underline;
}
/ * CONTENT * /
#content
{
width：1100px;
height：auto;
margin：auto;
color：＃282828;
position：relative;
}
/ * FOOTER * /
#footer
{
width：1100PX;
height：50px;
position：absolute;
bottom：0;
margin：auto;
background-color：＃282828;
}
#copy
{
width：auto;
float：right;
margin-right：5px;
height：50px;
line-height：50px;
}
解决方案
页脚（1100像素），你可以只做一个 left：50％; margin-left：-550px 将它居中。
示例：定位绝对定位的元素
http://jsfiddle.net / vdWQG /
因此，页脚将变为：
#footer
{
width：1100PX;
height：50px;
position：absolute;
bottom：0;
left：50％; / * Add this * /
margin-left：-550px; / *添加这个（这是#footers宽度的一半）* /
background-color：＃282828;
}
在用户向下滚动时粘贴在页面底部，使用 position：fixed 而不是 position：absolute / p>
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<a href="index.php"><div class="link">Home</div></a>
<a href="wie.php"><div class="link">Wie is wie</div></a>
<a href="fotos.php"><div class="link">Foto's</div></a>
<a href="repertoire.php"><div class="link">Repertoire</div></a>
<a href="links.php"><div class="link">Links</div></a>
<a href="contact.php"><div class="link">Contact</div></a>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
解决方案
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
这篇关于位置绝对和边距：自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
