centrar div

lbazer · #1 (**permalink**) 20/03/2009, 15:34

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

netizen.01 · #2 (**permalink**) 20/03/2009, 17:00

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!

lbazer · #3 (**permalink**) 20/03/2009, 20:46

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.