Foros del Web » Creando para Internet » CSS »

centrar en la pagina

Estas en el tema de centrar en la pagina en el foro de CSS en Foros del Web. tengo que centrar el contenido de una pagina para que siempre quede al medio tanto en horizontal como en vertical, he encontrado el siguiente codigo ...
  #1 (permalink)  
Antiguo 12/09/2011, 01:46
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 12 años, 9 meses
Puntos: 5
centrar en la pagina

tengo que centrar el contenido de una pagina para que siempre quede al medio tanto en horizontal como en vertical, he encontrado el siguiente codigo buscando en goolge, pero se puede mejorar, o hacer algo mas sencillo?.

en CSS
#xouter{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#xcontainer {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 585px;
}
#xinner {
width: 872px;
background:#fff;
height: 585px;
text-align: center;
margin-left:auto;
margin-right:auto;

}

HTML
</head>
<body>
<div id="xouter">
<div id="xcontainer">
<div id="xinner">
  #2 (permalink)  
Antiguo 12/09/2011, 02:14
jesusgox
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: centrar en la pagina

buenas!

Yo estoy aprendiendo, pero me he dado cuenta de una cosa, si le damos estos valores a cada uno:
a{
Display: blocked;
Text-align: center;
}
ó
img{
Display: bloqued;
margin:auto;
}

Se centra el html con el css, ¿Alguien podría confirmar que esto esté bien? ¿Qué significa el display blocked?
  #3 (permalink)  
Antiguo 12/09/2011, 02:20
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 12 años, 9 meses
Puntos: 5
Respuesta: centrar en la pagina

eso esta bien para centrar en horizontal pero no verticalmente y quede centrado en medio de la pagina
  #4 (permalink)  
Antiguo 12/09/2011, 04:49
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: centrar en la pagina

como tiene un largo y ancho definido puedes usar position:absolute

para un div de 100px x 100px
Cita:
cont{position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;}
en caso que el alto y ancho fuese dinámico
  #5 (permalink)  
Antiguo 12/09/2011, 08:30
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 12 años, 9 meses
Puntos: 5
Respuesta: centrar en la pagina

lo he estado probando y asi me ahorro un div el xinner, muy buena opcion.
  #6 (permalink)  
Antiguo 12/09/2011, 11:26
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 12 años, 8 meses
Puntos: 87
Respuesta: centrar en la pagina

+1 al método de IsaBelM.

Etiquetas: contenido, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:22.