jueves, 22 de septiembre de 2011

Cómo centrar horizontalmente una etiqueta DIV fija (position:fixed)

Durante la construcción de un pequeño sitio web para verificar las cabeceras http que envian los navegadores web (pueden visitarlo aquí) me vi en la necesidad de centrar una etiqueta <div> afectada por el estilo position:fixed.

En mi trajinar por hallar una solución visité varios sitios web; unos ofrecían alternativas, otros dejaban más dudas que las que tenía al principio, otros decían que era imposible ya que el estilo fijo excluye a los elementos afectados del flujo HTML normal, etc.

Tratando de usar todas las ideas obtenidas durante la búsqueda y aplicando un poco de lógica utilicé el siguiente método para centrar mi div fijo:

Nota: nuestro elemento DIV debe tener un tamaño definido (si se define en porcentaje es posible que requiera utilizar calculadora), en este caso le colocaremos un ancho de 400 pixels.

1. Colocar nuestro DIV de forma normal en el BODY y le asignarle una id (también podría hacerse mediante una clase, pero en este ejemplo usaremos el id fcentrado). Quedaría algo así:

<div id="fcentrado">Este es nuestro div de 400 pixels centrado horizontalmente</div>

2. Agregar el siguiente estilo, indicando una posición fija, ancho de 400 pixels, fondo verde (para visualizarlo mejor) y las dos últimas líneas que harán la magia:

<style type="text/css">
#fcentrado {
position:fixed;
width:400px;
background:green;
margin-left:50%;
left:-200px;
}
</style>

Nótese que la propiedad margin-left:50% correrá nuestro DIV hacia la derecha una medida igual a la mitad del ancho total de nuestro navegador (maximizado). Es decir, nuestro div comenzaría desde la mitad del display del navegador.

Ahora, agregando la propiedad left:-200px le estamos diciendo al navegador que corra 200 pixels hacia la izquierda nuestro DIV, pero como éste comenzaba justo desde la mitad del display, significa que ahora habrán 200 pixels desde esa mitad hacia la izquieda y por ende quedarán también 200 pixels desde la dicha mitad hacia la derecha, es decir, centrado.

El resultado sería algo así

Nota: este método fue probado en Mozilla Firefox 6.02, Google Chrome 14.0.835.186 e Internet Explorer 9. Se presume que funciona también en versiones modernas de Safari, Ópera y otros, mas no se garantiza que funcione en versiones viejas de navegador alguno.

8 comentarios:

  1. A no mms que chingon eres Gracias Bro!!

    ResponderEliminar
  2. eres grande amigo, muchas gracias, fue bastante útil.

    ResponderEliminar
  3. waooo xD buena idea bro Gracias!!

    ResponderEliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  5. Sinceramente, es una solución ingeniosa pero si realmente la quieres tener centrada sea cual sea la resolución de pantalla y en todos los navegadores, debes de poner el siguiente código, y es porque en tu caso eso sólo sirve para una resolución determinada.
    [code]
    #imagenfondo {
    position: fixed;
    width: 350px;
    height: 373px;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    }
    [/code]

    La altura y el ancho de la capa si es una imagen no puede ser inferior al tamaño de la imagen, para mirar el tamaño en píxeles de una imagen dadle a botón derecho y luego a propiedades / detalles.

    PD: he borrado el anterior para ponerlo más claro con codes. Espero que te/os haya servido de ayuda.

    Un Saludo!!

    ResponderEliminar
  6. Excelente! Tenía mi DIV de 1200px y el left me corresponde a left:-600px;

    Justo lo que buscaba!

    ResponderEliminar
  7. Un muy buen aporte gracias era lo que buescaba :)

    ResponderEliminar