Centrar el contenido

Profesores:JAB y Ester Torres
Centrar el contenido de los <article>
Ahora mismo el único contenido que está (casi) centrado son los 3 <article> y por una simple operación matemática.

Cada <article> tiene un ancho (width) de 240 píxeles.

Los márgenes de 112 píxeles de cuadro2 (por la derecha y por la izquierda).

Los 5 píxeles de padding de la derecha y los 5 de la izquierda (de cada <article>).

El píxel del borde de la izquierda y el de la derecha (de cada <article>).

TOTAL:

240 x 3
112 + 112
(5 + 5) x 3
(1 + 1) x 3
720
224
30
6
980

Teniendo en cuenta que la suma de todo (los 3 <article> con sus respectivos paddings, margins y borders) tiene una anchura de 980 píxeles, y que el ancho total del div (contenido) es de 1000 píxeles, quedan 20 píxeles vacios (a la derecha) que casi no se notan.

estilos.css
#contenido{
   width:980px;
   margin:0 auto;
}

Esos 1000px se centran en la página gracias al margin:0 auto; que colocamos en el selector #contenido{ en el tema 8: Configurando el contenido.
Para ajustarlo al máximo vamos a sustituir los 1000px por 980px.



Centrar el <nav>
Para centrar el <nav> vamos a darle la anchura justa que tiene y después configurar sus márgenes izquierdo y derecho en automáticos, para que se centre horizontalmente.

estilos.css
nav{
  width:800px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  font-family:alegreya-bold;
  color:silver;
  font-size:25px;
}
Amplíamos el código de este selector CSS que fue creado en el tema 7: Modificar el primer 'enlace' y posteriormente modificado en el tema 12: Tipografías.

Con width:800px; definimos la anchura total de los enlaces (paddings incluidos) del <nav>.
margin-left:auto; definimos el margen izquierdo en automático.
margin-right:auto; definimos el margen derecho en automático.
Con margin-top:50px; aprovechamos para dejar un poco de margen arriba.


En el siguiente tema trataremos todo lo relacionado con el