centrar en la pagina

Citar

Escrito el 12 Sep 2011 07:40 am

queria centrar el contenido de una tabla en medio de la pagina, tanto horizontal como vertical, he encontrado este codigo lo que no se es si hay algo mas sencillo o se puede mejorar.

Código :

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">

Por gustavo1976

24 de clabLevel

Envíale un mensaje privado Web

@amdisenoweb

Citar

Escrito el 12 Sep 2011 12:22 pm

Falta qiue <body> y <html> tengan height: 100%;

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 12 Sep 2011 02:20 pm

en principio no lo tienen y si lo centra, vamos que creo un cuadro de 872 de ancho y 585 de alto y sale en medio de la pagina sea cual sea la resolucion del monitor

Por gustavo1976

24 de clabLevel

Envíale un mensaje privado Web

@amdisenoweb

Citar

Escrito el 12 Sep 2011 02:28 pm

Claro, pero el div xouter no está verticalmente centrado si su contenedor (en este caso <body>) no tiene un height explícito y el <body> no tomará la altura de la ventana como height si <html> no tiene un height explícito.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 14 Sep 2011 07:21 am

perdon si que tenia el html y body al 100% y con ayuda lo he reducido a solo esto teniendo en cuenta que al ancho y alto son estaticos:

Código :

html,body{height:100%;width:100%;margin:0;padding:0}

body { 
   text-align:center;   
}

#xcontainer {
   position:absolute; 
   top:50%; 
   left:50%; 
   width:872px;
   height:585px;
   margin:-292px 0 0 -436px;
}

Por gustavo1976

24 de clabLevel

Envíale un mensaje privado Web

@amdisenoweb

centrar en la pagina

Escribe una respuesta rapida