¿ como puedo centrar un objeto con CSS ?

davidj · #1 (**permalink**) 02/10/2006, 09:42

hola..

¿como puedo centrar un objeto (tablas, imagenes,...) tanto horizontalmente como verticalmente en pantalla ?

Se que existe una forma:

position: absolute;
margin-top: -150px; (La mitad del alto del objeto)
margin-left: -200px; (La mitad del ancho del objeto)
top: 50%;
left: 50%;

El motivo de esta consulta es hacer una web de 400 ancho x 300 alto y centrarla en la pantalla pero con este método, si se visualiza la web en una resolución inferior a la diseñada originalmente, no se ve correctamente ya que al tener numeros negativos la web "se sale" de la parte superior de la pantalla.

¿como se soluciona esto?

gracias

kahlito · #2 (**permalink**) 02/10/2006, 16:03

Hola davidj, te pongo un ejemplo incluyendo un color de fondo para que lo veas bien:

Código HTML:

<style type="text/css">
#contenedor_centrado{
	position:absolute;
	top:50%;
	left:50%;
	width:400px;
	height:300px;
	margin-left:-200px;
	margin-top:-150px;
	background-color:#006699;
	}
</style>
</head>
<body>
<div id="contenedor_centrado">
</div>
</body>

Tambien te paso otro enlace importante:

http://www.tierradenomadas.com/tw003.phtml

Y sobre todo el del buscador del foro, ya que este tema se ha tratado mucho por aquí

http://www.forosdelweb.com/search.php?searchid=784663

Saludosss

davidj · #3 (**permalink**) 03/10/2006, 08:09

gracias por tu respuesta pero el ejemplo que me comentas es el que yo ya realizo. Funciona bien pero tiene el problema de que si haces mas pequeña la pantalla o cambias a una resolución inferior, la parte superior de la web no se ve (ya que la CSS contiene numeros negativos), no sale ni siquiera el desplazador de ventana para "tirar" hacia arriba.

iré buscando por ahi

gracias igualmente!

fearlex · #4 (**permalink**) 03/10/2006, 08:21

Cita:

Iniciado por davidj

gracias por tu respuesta pero el ejemplo que me comentas es el que yo ya realizo. Funciona bien pero tiene el problema de que si haces mas pequeña la pantalla o cambias a una resolución inferior, la parte superior de la web no se ve (ya que la CSS contiene numeros negativos), no sale ni siquiera el desplazador de ventana para "tirar" hacia arriba.

iré buscando por ahi

gracias igualmente!

Agregale a este codigo:

Cita:

davidj · #5 (**permalink**) 03/10/2006, 08:31

lo siento pero continuo con el mismo problema solo que añadiendo esta línea me sale, ademas del scroll de pantalla general, el scroll en la web 400x300.

¿habrá alguna manera?

kahlito · #6 (**permalink**) 03/10/2006, 08:59

Hola davidj, que Doctype estas utilizando?

¿Podrias poner el código que utilizas?

davidj · #7 (**permalink**) 03/10/2006, 10:58

mira, este es el doctype y el código (la imagen es 740x417):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

</head>

<body>
<div class="centrar" id="centrado"><img src="web_andobus_pag_principal.jpg" width="740" height="417"></div>
</body>
</html>

se me centra perfecto solo es eso, que si se reduce la pantalla, llega un punto que no se ve la parte superior ya que al tratar con números negativos en la CSS, la imágen se "va" de la pantalla. No creo k sea problema de esta web ya k me parece k es normal k lo haga al usar este código CSS.

kahlito · #8 (**permalink**) 03/10/2006, 14:47

He probado tu código y me funciona bien hasta en 800 x 600. Quizás lo único que veo que se pegue un poco la imagen arriba en Firefox y para eso puedes hacer varias cosas como por ejemplo dándole un margen a la imagen:

Código HTML:

img {margin:4px;}

Espero que te sirva

davidj · #9 (**permalink**) 05/10/2006, 11:00

ok, gracias por probarlo pero...

¿has reducido la pantalla a, por ejemplo, la mitad de alto y puedes ver la parte superior de la imagen?

pruebalo...

kahlito · #10 (**permalink**) 05/10/2006, 22:21

Sí, ya veo a que te refieres, es más tambien intenté arreglar algo así hace tiempo con una web bastante alta y no se podia ni siquiera en 800 x 600 pero en tu caso sí (en 800 x 600).

De todas formas piensa que casi nadie va a poner tu web a una altura de 250 px o 300 px, a no ser que te refieres a verla desde otra plataforma, dispositivo etc etc, ahí ya no estoy seguro como se verá, pero por ejemplo si te vas a Opera y la ves desde la opción que simula a un móvil (pantalla pequeña) supuestamente no daria ningún problema

davidj · #11 (**permalink**) 07/10/2006, 06:26

gracias por tus respuestas las tendré en cuenta