Elemento de encabezado central con la posición fija en la parte superior de la página

Tengo un problema de CSS específico para Google Chrome. Investigué pero nadie sabe cómo solucionarlo sin Javascript, que no quiero usar porque mi elemento cambiará en el futuro.

El código está debajo, si lo usa verá que el div infantil va al lado derecho de la página y si agrego el mismo top a los valores de posición de los padres, se mueve en la dirección opuesta.

El sitio web tendrá mucho más contenido, y quiero un encabezado centrado donde la barra lateral y el contenido flotante desaparecerán a medida que se desplaza por la página.

   

y el css es

 .header_p1 { background: white; width: 750px; height: 110px; margin-bottom: 10px; } .header_p1_child { float: none; background: white; width: 750px; height: 110px; position: fixed; top: 0px; } 

Desea que el encabezado esté centrado en la parte superior de la página, de modo que para las páginas más largas, el contenido se desplace verticalmente debajo del encabezado.

Aquí está el prototipo de fragmento de HTML:

 

Lorem ipsum dolor ...

div.wrapper un bloque div.wrapper para definir un contexto para el diseño, que tiene algo de relleno igual a la altura esperada del encabezado.

El bloque div.header contiene una imagen (200×100 px) y div.content contiene varios párrafos de texto.

El diseño y el estilo se definen en el siguiente CSS:

 .wrapper { outline: 2px dotted blue; /** optional **/ /** Top padding so that initially, the content is below the header **/ padding-top: 100px; } .header { height: 100px; width: 400px; /** Use 100% to fill the width of the page **/ position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; background-color: rgba(0,0,255,0.2); } img.banner { display: block; margin: 0 auto; } 

El estilo .header declara un alto y un ancho, y usa la position: fixed para fijar la posición del elemento al puerto de visualización. Para el posicionamiento, top: 0 coloca el encabezado en la parte superior de la página.

Para centrar el elemento, ajuste a la left: 0 y a la right: 0 y use margin: 0 auto .

Dentro de div.header , puede declarar que la imagen es un elemento de tipo bloque y luego centrarla usando margin: 0 auto .

Lo comprobé tanto en Firefox como en Chrome y funciona como se esperaba. Esto se basa en CSS 2.1 por lo que debería funcionar en bastantes navegadores antiguos, tal vez IE7, pero no lo probé, pero quizás alguien puede hacerlo y comentar en consecuencia.

Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/

Fuente: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

NO USE la etiqueta

, esto está desactualizado y debe hacerse con CSS

  

CSS

 .header_p1 { background: white; width: 750px; height: 110px; padding-bottom: 10px; position: fixed; top: 0; left: 50%; /* Start at 50% of browser window */ margin-left: -325px; /* Go half of width to the left, centering the element */ } 

Orignally taken from here Para obtener la imagen exactamente centrada, es una simple cuestión de aplicar un margen superior negativo de la mitad de la altura de las imágenes, y un margen izquierdo negativo de la mitad del ancho de las imágenes. Para este ejemplo, así:

enter image description here

 .centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } 

enter image description here