Centrar un div con position:absolute
Estoy haciendo una página en la que quiero poner varias líneas que estén siempre al final de la página. Para ellos uso css, pero no consigo que el "div" salga centrado con "position:absolute;". Te paso el código fuente.
<style type="text/css">
#pie {
position:absolute; bottom:0;
text-align: center;
left:50%;
}
li {
color: blue;
list-style-type: none;
margin: 5;
}
</style>
<div id="pie" >
<ul>
<li>© Copyright 2011</li>
</ul>
</div>
<style type="text/css">
#pie {
position:absolute; bottom:0;
text-align: center;
left:50%;
}
li {
color: blue;
list-style-type: none;
margin: 5;
}
</style>
<div id="pie" >
<ul>
<li>© Copyright 2011</li>
</ul>
</div>
1 respuesta
Respuesta de Victor Portero
1
Para que algo pueda estar centrado, lo primero que necesita es tener un ancho (width) si no tiene, nunca se va a centrar.
Después, para el li, en el CSS tienes que decirle que estará dentro de un ul por lo que quedaría así
"ul li {color: blue;
list-style-type: none;
margin: 5;}
Sobre el CSS prueba esto, haber si te funciona:
<html>
<head>
<title>Prueba</title>
<style type="text/css">
body{
margin:0;
background: red;
}
#wrapper {
margin: 20px auto 0;
overflow: hidden;
width: 944px;
}
#pie {
position:absolute;
bottom:0;
margin:auto 0;
text-align:center;
width:900px;
}
ul li {
color: blue;
list-style-type: none;
margin: 5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="pie" >
<ul>
<li>© Copyright 2011</li>
</ul>
</div>
</div>
</body>
</html>
Después, para el li, en el CSS tienes que decirle que estará dentro de un ul por lo que quedaría así
"ul li {color: blue;
list-style-type: none;
margin: 5;}
Sobre el CSS prueba esto, haber si te funciona:
<html>
<head>
<title>Prueba</title>
<style type="text/css">
body{
margin:0;
background: red;
}
#wrapper {
margin: 20px auto 0;
overflow: hidden;
width: 944px;
}
#pie {
position:absolute;
bottom:0;
margin:auto 0;
text-align:center;
width:900px;
}
ul li {
color: blue;
list-style-type: none;
margin: 5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="pie" >
<ul>
<li>© Copyright 2011</li>
</ul>
</div>
</div>
</body>
</html>
