Contenido HTML / CSS siempre centrado

¿Cómo centro el contenido de mi página para que se centre en cada tipo de tamaño de pantalla? Por ejemplo, en Allegorithmic si cambio el tamaño de mi navegador, el contenido central se desplazará hacia la izquierda hasta que llegue a la ventana del navegador. Hay ciertos elementos de fondo que se extienden horizontalmente de manera infinita (el gris oscuro en la parte superior, el gris claro en el medio, etc.). Puedo abrir este sitio web en mi computadora portátil y en mi iMac y está centrado. Pensé que podría usar el posicionamiento absoluto para mover contenido x cantidad de píxeles desde la izquierda, pero eso no funcionará porque 300 píxeles que centran el contenido en una pantalla pequeña, no lo centrarán en una pantalla grande.

Entonces, en esencia, me gustaría duplicar la funcionalidad del sitio web Allegorithmic, tener fondos que son infinitos horizontalmente, pero que tienen cierto contenido que siempre permanece "centrado".

preguntado el 27 de agosto de 11 a las 20:08

5 Respuestas

Si quieres elementos siempre centrados usa margin: 0 auto; en los estilos en él.

#yourElement{
    margin: 0 auto;
} 

Referencia de W3.org para centrar cosas usando CSS

Para que los elementos de fondo se extiendan por toda la longitud de la página, simplemente déles un ancho del 100%, luego cree un contenedor secundario dentro y déles el mismo estilo que el anterior. Apuesto a que el ejemplo que diste es simplemente usar un 1px por un poco de altura con líneas para obtener ese aspecto en el fondo.

Ejemplo

Ejemplo con imagen bg

Marcado

<div id="background">
    <div id="content">
    </div>
</div>

CO

#background{ 
    width: 100%;
}
#content{  
    width: 960px;
    margin: 0 auto;
}

Respondido 28 ago 11, 01:08

Prueba esto -

.center{
    margin: 0 auto;
    position: relative;
}

auto debe alinear el contenido de la página al centro dejando el espacio (izquierda, derecha) dependiendo del tamaño del navegador.

Respondido 28 ago 11, 01:08

Puede definir contenedores con un div interior en ellos para cada 'nivel'.

<div id="first" class="container"><div class="inner">
  first content goes there
</div></div>
<div id="second" class="container"><div class="inner">
  another content goes there
</div></div>
...
...
...

y estilícelo con css, use id para estilos personalizados por contenedor (son 100% anchos, por lo que tienen el bg completo)

.container {
  background: red;
  text-align: center;
}
.container > .inner {
  margin: 0 auto;
  width: 960px;
  text-align: left;
}

Respondido 28 ago 11, 01:08

HTML

<div id="wrapper">
   <header>
      <nav>
        ....
      </nav>
   </header>

   <div id="main">
       .....
   </div>
</div>

CO

#wrapper {
  width: 960px /* whatever you wanted but there has to be a width*/
  margin: 0 auto;  
}

Esto envolverá y centrará todo el contenido de su página.

Espero que esto ayude.

Respondido 28 ago 11, 01:08

Aquí tengo algunos ejemplos que puede ver. El primero (recuadro rojo) creo que es lo que estás buscando. http://jsfiddle.net/kYCWX/

Respondido 28 ago 11, 01:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.