Foros del Web » Creando para Internet » CSS »

centrar div

Estas en el tema de centrar div en el foro de CSS en Foros del Web. Hola a todos, tengo este div q me esta dando dolor de cabeza, por no saber como centrarlo perfectamente en la web, la idea es ...
  #1 (permalink)  
Antiguo 20/03/2009, 16:34
 
Fecha de Ingreso: febrero-2009
Mensajes: 159
Antigüedad: 8 años, 10 meses
Puntos: 1
centrar div

Hola a todos, tengo este div q me esta dando dolor de cabeza, por no saber como centrarlo perfectamente en la web, la idea es que quede en la parte de abajo del sitio y centrado perfectamente con position:fixed, por lo cual quedaría sobre el fonde y acompañaría el scroll( como en el facebook). Hasta ahora lo unico que tengo es esto:

div.banner {
font-size: 16px;
font-weight: bold;
text-align: center;
position: fixed;
top: auto;
width: 990px;
bottom:0px;
right: 50%;
}

pero no se centra. Conocimientos de CSS tengo pero siempre me complica el centrar perfectamente objetos. Si alguien sabe le agradezco, asi ya aprendo una forma generalizada de centrarlos. Cualquier ayuda serviría.
Saludos
  #2 (permalink)  
Antiguo 20/03/2009, 18:00
 
Fecha de Ingreso: agosto-2007
Ubicación: Barcelona
Mensajes: 39
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: centrar div

hola,

puedes recurrir a dos métodos, uno usar margenes negativos que tuvieran las dimensiones del la mitad exacta de tu div que intentas centrar (lo que no es muy práctico pues tendrías que ajustarlos cada vez que tu div cambiase de anchor en futuras actualizaciones)
o buen puedes englobar ese div que intentas centrar dentro de otro div que será el que permanezca fijo en el borde inferior de la ventana y con anchura 100%, mientras que el div que intentas centrar, se centra automáticament dentro de éste sin importar sus dimensiones.

Para que quede más claro, te pongo el código a continuación. Puedes pegarlo en nuevo documento para hacer pruebas sobre él (se ve bien tanto en ff como en ie).

Código:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>
  <head>
	<style>
	.fixed{
	position:fixed;
	bottom:0px;
	width:100%;
	text-align:center;
	}
	.fixed div{
	margin:0 auto;
	width:500px;
	height:200px;
	background:red;
	}
	</style>
  </head>

  <body>

	<div>toda la pantalla</div>

	<div class="fixed">
		<div>caja roja centrada</div>
	</div>

  </body>
</html>
Espero te sea útil.

Saludos!
  #3 (permalink)  
Antiguo 20/03/2009, 21:46
 
Fecha de Ingreso: febrero-2009
Mensajes: 159
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: centrar div

Me funciono perfercto, muchisima gracias, ya que estamos resolviendo problemas jej, al codigo que me diste lo adapte a mis necesidades y le agregue un borde a la capa flotante, alguien sabe de alguna manera de que el borde no la capa tenga menos opacidad en otras palabras que sea translucido. Si alguien puede ayudarme le agradezco. Saludos.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:16.