Foros del Web » Creando para Internet » CSS »

¿ como puedo centrar un objeto con CSS ?

Estas en el tema de ¿ como puedo centrar un objeto con CSS ? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/10/2006, 10:42
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
¿ como puedo centrar un objeto con CSS ?

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
  #2 (permalink)  
Antiguo 02/10/2006, 17:03
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #3 (permalink)  
Antiguo 03/10/2006, 09:09
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
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!
  #4 (permalink)  
Antiguo 03/10/2006, 09:21
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por davidj Ver Mensaje
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:
<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;
overflow: scroll;
}
</style>
</head>
<body>
<div id="contenedor_centrado">
</div>
</body>
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #5 (permalink)  
Antiguo 03/10/2006, 09:31
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
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?
  #6 (permalink)  
Antiguo 03/10/2006, 09:59
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola davidj, que Doctype estas utilizando?

¿Podrias poner el código que utilizas?
  #7 (permalink)  
Antiguo 03/10/2006, 11:58
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
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&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
.Estilo1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
}


.centrar {

position: absolute; /*Posicionamiento absoluto*/

margin-top: -208px; /*Restamos la mitad de alto del objeto para centrarlo verticalmente*/
margin-left: -370px; /*Restamos la mitad de ancho del objeto para centrarlo horizontalmente*/

top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/
left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/

width:740px;
height:417px;

}

-->
</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.

  #8 (permalink)  
Antiguo 03/10/2006, 15:47
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #9 (permalink)  
Antiguo 05/10/2006, 12:00
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
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...

  #10 (permalink)  
Antiguo 05/10/2006, 23:21
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #11 (permalink)  
Antiguo 07/10/2006, 07:26
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
gracias por tus respuestas las tendré en cuenta

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:49.