problema con el centrado de los div

zeross · #1 (**permalink**) 31/05/2009, 05:43

Hola a todos.

Veréis, tengo un problema, y es que estoy empezando con css y no se me da nada bien. Quiero hacer una capa contenedora centrada, pero no lo consigo. Lo único que consigo es que la capa contenedora se me quede alineada a la izquierda. Adjunto mi código:

Código Css

body{
background-color:#000000;
text-align:center;/*Para IE*/
}

#fondo{
margin:0 auto;
padding:0;
text-align:left;
}

Código HTML

<div id="fondo"><img src="images/fondo.jpg" width="884" height="1012">
<div id="encabezado"><img src="images/encabezado_pricipal.jpg" width="686" height="118"></div>
</div>

He probado muchísimas cosas pero no consigo que se me centre y pueda verse centrado en todas las resoluciones. Alguien me puede echar una mano?Muchas gracias!

kseso? · #2 (**permalink**) 31/05/2009, 06:20

dale una anchura a #fondo ( pero que no sea 100%) y, aunque no es imprescindible, posición relativa (por si acaso

)

El text-aling actúa sobre el alineado de los contenidos alojados dentro un contenedor, no sobre la ubicación de este contenedor respecto a sus ancestros.

zeross · #3 (**permalink**) 31/05/2009, 06:44

Muchas gracias por responder tan rápido. Le añadi un width y logro centrarlo, pero no en todas las resoluciones. Ese es mi quebradero de cabeza, conseguir hacerlo en todas. También añadí position:relative y lo prove sin el, pero es lo mismo una cosa que otra. Que puedo hacer?

-Defero- · #4 (**permalink**) 31/05/2009, 06:52

Creo que lo que te falta es ponerle un "display: block" a #fondo. Yo lo hice así en esta web con este CSS.

kseso? · #5 (**permalink**) 31/05/2009, 06:58

Hablamos de centrado en la horizontal ¿verdad? Porque si es también en la vertical las propiedades que se necesitan son alguna más.
copia y ejecuta en tu navegador algo tan básico como esto

Código html:

Ver original<!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" xml:lang="es" lang="es-es">
<head>
<title>enésima respuesta al centrado</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position:relative:}
html, body {
background-color: #fff;
}
#contenedor{
width: 50%;
background-color: #cdcdcd;
margin: 0 auto;
height: 400px;
}
 
</style>
</head>
<body>
<div id="contenedor">
<p><a href="http://www.forosdelweb.com/f53/problema-con-centrado-div-704903/#post2938993" title="Y yo visitante tampoco volveré a hacer pregunta tan elemental">A los cielos pongo por testigos que no volveré a explicar cómo centrar con css</a></p>
</div>
</body>
</html>

Y pásate por www.librosweb.es y haz de sus pdf sobre css tus libros de cabecera durante un pequeño tiempo

Un saludo

-Defero- · #6 (**permalink**) 31/05/2009, 07:14

Kseso, tu firma está provocando un bucle infinito que provocará que el Universo se repliegue sobre sí mismo.

kseso? · #7 (**permalink**) 31/05/2009, 07:21

Cita:

Iniciado por Defero.tk

Kseso, tu firma está provocando un bucle infinito que provocará que el Universo se repliegue sobre sí mismo.

Pero ese bucle y su repliegue se realiza justo en el centro del universo y sólo afecta a los elementos descentrados por incumplimiento de su promesa

zeross · #8 (**permalink**) 31/05/2009, 07:49

Lo siento pero es que no lo consigo. Lo veo bien en mi navegador pero en otras resoluciones se ve rodado a la derexa

-Defero- · #9 (**permalink**) 31/05/2009, 08:15

Pon un enlace a la web, para que veamos dónde está el problema.

hades87 · #10 (**permalink**) 31/05/2009, 08:46

En un principio, si le pones el margin: 0 auto; que te ha dicho kseso? no deberías tener problemas.

kseso? · #11 (**permalink**) 31/05/2009, 12:29

Hola Zeross
Copia y pega todo mi código (y nada más que mi código) en un archivo de texto nuevo. Incluido el doctype.
Renómbralo a .html.
Ábrelo con tu navegador y redimensiona la ventana a la anchura que tú quieras (mayor a 2 px y en nº par de píxeles a tamaños ínfimos

.

Va una cerveza virtual a ver si siempre se coloca o no en el centro. Del comportamiento del texto contenido no hablamos.

Ya nos dirás quién pone la cerveza.
Un saludo

jomaruro · #12 (**permalink**) 31/05/2009, 12:30

Hola:

Cita:

Iniciado por Defero.tk

Kseso, tu firma está provocando un bucle infinito que provocará que el Universo se repliegue sobre sí mismo.

Cita:

Iniciado por kseso?

Pero ese bucle y su repliegue se realiza justo en el centro del universo y sólo afecta a los elementos descentrados por incumplimiento de su promesa

¡Que filosóficos estais hoy!

Saludos.

jomaruro · #13 (**permalink**) 31/05/2009, 12:34

Hola Zeross:

Deberias poner al principio de todo del css lo siguiente:

Código:

* {
    padding: 0;
    margin:0 auto;
}

Lo que te hace un reseteo de todos los padding y margin de tu css, lo que te ayuda a eliminar los padding y margin por defecto de todos los navegadores.

Para tener más información al respecto buscate en google informacion sobre reset en css.

Saludos.

kseso? · #14 (**permalink**) 31/05/2009, 12:53

No Jomaruro.
No tiene porqué darle ese valore (margin: 0 auto) de forma universal. Seguramente le traerá muchos más problemas que otra cosa. Ya le coloco un "mini-reset" y le he dado a entender de la importancia del doctype.

Un saludo.

jomaruro · #15 (**permalink**) 31/05/2009, 13:49

Hola:

Bueno, yo siempre lo pongo así y, que yo sepa, no me ha dado problemas. Pero sabes más que yo así que lo tendré en cuenta a partir de ahora. ¡Gracias!

Saludos.

zeross · #16 (**permalink**) 31/05/2009, 16:55

Saludos. He probado nuevamente con el código de Kseso? y me funciona, en varias resoluciones, pero en concreto, en la resolución 1024 - 768 no me funciona(y supongo que habrá algunas mas, pero no lo he comprobado). En el código le he añadido al body la propiedad text-align:center; y en el nombre de la capa text-align:left, para que pueda verse en IE y me funciona correctamente, pero como ya os he dicho, no en esa resolución. Voy avanzando poco a poco xDD. Como podría verlo por fin todo centrado en todas las resoluciones?

kseso? · #17 (**permalink**) 31/05/2009, 17:43

Cita:

Iniciado por zeross

... pero en concreto, en la resolución 1024 - 768 no me funciona(y supongo que habrá algunas mas, pero no lo he comprobado).

Lo siento, Zeross, pero no me lo creo que mi código (entero y sólo mi código) no centre ese contenedor en cualquier resolución (salvedad hecha de lo dicho anteriormente).
Y me gustaría ver una captura de pantalla en 1024px horizontales. Otra cosa muy distintas es cómo estés trasladándolo a tu código.

Para centrar tu página SÓLO tienes que colocar todo el contenido en una caja llamada #contenedor, RESPETA la propiedad "margin: X auto X auto;" y dale una anchura ya sean px, %, em o lo que quieras. Y déjate de tanto text-align y otras cosas por el estilo.

En lo que es y no es, te pongo una captura del código de referencia en 1024px de anchura. Lo único que he cambiado es el tamaño de la fuente para forzar varias líneas. Colocada en miniatura para no descuadrar el foro:

-Defero- · #18 (**permalink**) 31/05/2009, 17:54

Repito lo que ya he dicho:

Cita:

Iniciado por Defero.tk

Pon un enlace a la web, para que veamos dónde está el problema.

Sin eso, lo demás es perder el tiempo, como hablar del sexo de los ángeles.

hades87 · #19 (**permalink**) 31/05/2009, 17:57

Cuan aclarador ha resultado tu frase Defero.tk

Kenichi · #20 (**permalink**) 31/05/2009, 18:16

Buenas, lamento entrometerme en el tema pero veo que aun no se ha encontrado la solucion :-p
Una cosa muy simple es darle un width con % pero que no sea 100, como dijeron antes, y luego, agregarle un margen a la izquierda que sea la mitad de lo que le falta a ese width para llegar a 100, por ejemplo:

Código HTML:

<html>
<head>
<style type="text/css">
#div {
    width:90%;
    margin-left:5%;
}
</style>
</head>
<body>
<div id="div">Esto esta centrado</div>
</body>
</html>

Asi queda centrado en forma horizontal y si no funciona, como ultimo recurso puedes usar <center> y </center> Aunque no lo recomiendo

linkgl · #21 (**permalink**) 31/05/2009, 18:21

si nada de eso sirve solo pega en tus css esto:

body { text-align:center; }

#divcentrado { margin: 0 auto 0 auto; width: tuanchopx; }

reemplaza #divcentrado por el div que quieras centrar y cambia tu ancho por el ancho de tu div y yap

zeross · #22 (**permalink**) 01/06/2009, 16:25

Saludos a todos! Perdonar por la tardanza pero he estado trabajando y no he tenido tiempo de postear. He probado lo que me decís y nada. No puedo poner un enlace a la página porque estoy trabajando en localhost, pero os pondré unas capturas de pantalla de como lo veo en mi pc con mi resolución 1280x1024 y en la otra resolucion.

no me deja poner url. Si alguien es tan amable y las puede subir se las podría pasar por privado para que las puedan ver.

adjunto mi codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "lo que va aquí lo tengo puesto pero no puedo poner url">
<html xmlns="lo que va aquí lo tengo puesto pero no puedo poner url">
<head>
<title>enésima respuesta al centrado</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position:relative;}

html,body {
background-color: #000000;
text-align:center;
}

#fondo{
width: 66%;
margin: 0 auto;
text-align:left;
}
</style>
</head>
<body>
<div id="fondo">
<img src="images/fondo.jpg" width="865" height="871"> </div>
</body>
</html>

Qué hago mal?

kseso? · #23 (**permalink**) 01/06/2009, 16:43

Cita:

Éste ya no es el código que yo te daba como ejemplo. Has añadido un elemento en el html (que por cierto, dejas sin cerrar la etiqueta imag: /> )
Y ¿cómo debe gestionar #fondo el hecho de que su contenido sea mayor que él mismo? 1280px-(laterales del navegador)*0.66<865 px (anchura de la imagen).
Haz la prueba:
1ª: pon un background-color y un borde de un pixel a #fondo y después de ver dónde está colocado elimina la imagen. ¿adivinas la razón de que aparentemente no lo vieses centrado a partir de cierta resolución?

Para esos casos te conviene informarte sobre las propiedades "min-width" y "overflow"

el text-aling yo no lo usaría en esa caja, si en algún momento lo necesitase ya lo declararía exprésamente.

Un saludo

zeross · #24 (**permalink**) 02/06/2009, 08:08

Saludos! Keseso? he mirado lo que me has dicho, y lo que hice fue redimensionar el width y el height de la capa #fondo al tamaño de la imagen. Por ahora me funciona, lo he estado probando en el trabajo. Cuando llegue a mi casa haré la prueba definitiva. Ya comentaré que tal. Muchas gracias por todo!