Centrar contenido de la página

Hola a todos, queria saber quien me puede dar una mano con el centrado del contenido para distintas resoluciones de pantalla ya que tengo bastantes...

La FAQ Centrar contenido de la página tiene

Pertenece a la categoría:

Pregunta
Hola a todos, queria saber quien me puede dar una mano con el centrado del contenido para distintas resoluciones de pantalla ya que tengo bastantes problemas con eso:




1) como centrar cuando creo mi pagina solo con layers: ya que a veces son mejores de manejar que las tablas, sobre todo para posicionar algo en la pagina.



2) probe con tablas y el ancho en porcentaje pero no me anda cuando utilizo en la pagina carga de modulos php por ej. <tr><td>require ('encabezado.php')</td></tr> cuando hago esto se pierde la centralizacion del contenido;



3) probe detectando la resolución con javascript, pero quedo muy rebuscado a la hora de posicionar el layer según la pantalla que detecta, sobre todo porque al escribir el layer con javascript no lo puedo ver en diseño y eso complica.



4) no encontre una instrucción en php que detecte la resolución.


Respuesta de Nicolas Castro
Lo puedes hacer bien facil con css.


Colocas todos los layers dentro de una capa contenedora, al declarar en body lo centras con text-align: center; y al declarar la capa contenedora la haces el margin: auto.


Prueba asi , a mi me funciona.




www.nivel03.com

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

Comentarios
Fueron enviados 5 comentarios a la faq
1 comentario no revisado
4 comentarios revisados:
Por: Jaime
02/5/07
Yo hace poco tuve ese problema, lo que hice fue poner una tabla o div centrada con css algo así:
.tabla{position:absolute; top:50%,left:50%}

claro q esto no la deja 100% centrada, hay que tener la medida de la tabla y con margenes negativos centrarla, osea, así:

.tabla{position:absolute; top:50%,left:50%; width:200px;height:200px; margin-top:-100px /*200/ 2 */; margin-left:-100 /* 200 / 2 */}
Por: theUniC
02/5/07
El "text-align:center;" funciona para Internet Explorer, pero no para Firefox (qué típico no?). Si no leí mal, IE trata a los elementos displayados com "inline" igual que los elementos mostrados en bloque. Para que funcione también con Firefox, es necesario añadir-le un ancho a la capa i la propiedad "margin".
<code>
#capa_a_centrar {
width:760px;
margin:0 auto;
/* Centrar en IE */
text-align:center;
}
</code>
Por: Angel
04/5/07
Hace poco tuve un problema similar para solucionarlo, primero pense usar un DIV contenedor pero no funciona tanto en Mozilla como IE (HAy que indicar margenes automaticos lo que genera un margen arriba, si modificas solo ese margen todo se descuadra.)
Asi que use una tabla como contenedor, funciona en todo explorador y no requiere css
<table align="center"><tr><td> Tu contenido </td></tr>
Por: CarlosN
30/5/07
Prueba con este codigo
body {
text-align:center;
}
#centro{
margin:auto !important;
width:900px;
text-align:left;
}

recuerda que lo debes usar en una etiqueta <div id=centro>tus capas o tablas</div>

suerte

Volver al árbol de categoríasVolver al árbol de categorías
Alojados en el grupo