Me gustaría saber como alinear un DIV al centro de la página verticalmente, horizontalmente ya sé hacerlo, pero verticalmente no.
Simplemento eso, espero vuestras respuestas. Saludos!
existe el atributo vertical-align de CSS pero nunca me funciono en divs, pregunte a varios amigos que entienden del tema y me contestaron que no era posible...
la existencia de ese atributo la conocia pero tampoco consigo hacerlo funcionar.
No hay ningun css hack para conseguirlo?
No es posible, si el alineado vertical es un requisito absoluto, tendrás que usar una tabla con tres celdas (sí, sí, ya sé que el CSS Positioning implica NO usar tablas, pero a veces no queda más remedio)
La verdad es que el CSS tiene muchas cosas que dan rabia, como por ejemplo que margin-left y margin-right en auto funcionen bien, mientras se pase por el forro margin-top y margin-bottom.
Lo mismo para lo del left: 50% con margin-left negativo, no es aplicable en vertical =/
Pues cuando el tamaño de la capa variable, osea líquido, no tengo ni idea de como hacerlo, pero si el tamaño de la capa es estático, con line-height puedes lograrlo.
Ejemplo práctico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
< body>
<div style="height: 400px; width: 600px; border: 1px solid #000; line-height: 400px;">
Hola Mundo
</div>
</body>
</html>
Aunque creo que no es lo que buscar, ¿no?
no quieor centrar un texto dentro de un DIV, quiero centrar un DIV dentro de una página.
Gracias de todas formas.
Aer si te vale esto, metiendo un div dentro de otro:
<style type="text/css">
<!--
DIV.outer
{
position:absolute;
left:50%;
top:50%;
width:300px;
height:300px;
margin-left:-150px;
margin-top:-150px;
background-color:#6699CC;
}
DIV.inner
{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
background-color:#99CCFF;
}
-->
< /style > dentro del body:
< div class="outer" >
in center of page
< div class="inner" >
in center of outer div
< /div >
< /div > EDIT: TB lo he visto en JavaScript:
< script language="JavaScript" >
IE5=NN4=NN6=OPA=false
if(navigator.userAgent.toLowerCase().indexOf("opera")+1)OPA=true
else if(document.all)IE5=true
else if(document.layers)NN4=true
else if(document.getElementById)NN6=true
onload=initialize // llama initialize() cuando carga la pág.
onresize=rePos // call rePos() cuando la página se cambie de tamaño (onresize)
// Opera no tiene evento 'onresize' así que hay que llamar a 'rePos' a cada momento
if(OPA) setInterval("rePos()",500)
function initialize() {
if(NN4) myObj=document.centerDiv
else myObj=document.getElementById("centerDiv").style
rePos()
}
w=100 // ancho de la capa
h=100 // alto de la capa
function rePos() {
// calcula el centro
if(NN4||NN6) {
xc=Math.round((window.innerWidth/2)-(w/2))
yc=Math.round((window.innerHeight/2)-(h/2))
} else {
xc=Math.round((document.body.clientWidth/2)-(w/2))
yc=Math.round((document.body.clientHeight/2)-(h/2))
}
// reposiciona la capa
if(this.NN4) {
myObj.moveTo(xc,yc)
} else {
myObj.left = xc + "px"
myObj.top = yc + "px"
}
}
< /script >
declaramos las propiedades de la capa:
< style type="text/css" >
body { font-size: 10px; font-family: verdana; background-color: #cccccc; }
#centerDiv {
position:absolute;
left:0px;
top:0px;
width: 100px;
height: 100px;
background-color: cyan;
border: navy solid 1px;
padding: 10px;
}
< /style >
Y por supuesto, el HTML:
< div id="centerDiv" >
Esto debería estar centrado
</div >
Isako: la solución con Javascript quedaría descartada porque es Javascript, y con una tabla de tres filas se consigue lo mismo y con menos rollo.
La que das con CSS, en principio es perfectamente válida (de hecho, en teoría debería funcionar). Pero a la que le pongas un Doctype válido (prácticamente cualquiera, pero en particular cualquiera de XHTML) la alineación vertical deja de funcionar. La horizontal va bien siempre. Es de hecho de lo que hablo de los márgenes negativos en mi anterior post.
Claro que, sin doctype queda perfectamente centrado, pero entonces la página no valida ni a la de veinte...
la w3c lo deshabilitó porque al aumentar el tamaño de la fuente las cosas se descolocan si están fijados
bueno, voy a tener que rectificar, decidí volver a hacer pruebas con el margen negativo para la alineación vertical, y ahora funciona ponga el doctype que ponga, tanto en IE6 como en Firefox. La última vez que miré el asunto fue hace un año y medio o así, me pregunto que habrá cambiado... (igual han actualizado el DTD)
Por lo tanto asumo mi error. De todos modos, en IE 5.2 Macintosh (Mac OS 9) sigue sin furular, tendré que ver con IE 5.5 PC o Opera (aunque en este último debería ir sin más pegas).
2 años después
Algo he leido parecido a lo mio, pero os explico como he conseguido de una jodida vez alinear una frase en la parte baja del div.
Copiar y pegar esto en un html, y sacareis vuestras propias concluiones.
Primero decir que esto solo sirve para alinear una linea abajo. Lo único que hay que explicar es la linea del line-height y la del margin-bottom negativo. Si no lo entendeis decirmelo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alineado abajo</title>
<style type="text/css">
div#alineadoABAJO
{
width:400px;
height:100px;
background-color:#999999;
font-size:20px;
line-height:180px; /* height * 2 - font-size /
margin-bottom:-100px;/ -(line-height / 2 + font-size / 2) */
}
</style>
</head>
< body ><!--Quitar los espacios , que el formulario de media-vida , me lo parsea-->
<div id="alineadoABAJO">
Estoy abajo
</div>
</body>
</html>
P.D: ¿No hechais de menos un css que permita establecer propiedades en función de otras propiedades sin tener que recurrir a lenguajes dinamicos, que llena la pagina de <? ?>?
Un saludo.