Imprimir Página - Modelo de caja tradicional, ¿Por qué aplicar text-aling al body?

Hola todos.

He estado siguiendo un libro HTML5, CSS3 y javascript. Pero ya viendo un poco sobre el modelo de caja tradicional, hay algo del ejercicio que estoy haciendo, que realmente no entiendo el por qué de aplicar dicha propiedad.

Código

<!DOCTYPE html />
<html lang="es">
  ...
<body>
 
  <div id="contenedor">
    <header id="cabecero">
     <hgroup>
        <h1>My Book</h1>
        <h2>Libro de HTML, CSS y javascript</h2>
     </hgroup>
    </header>
 
    <nav id="menu">
      <ul>
        <li>Boton 1</li>
        <li>Boton 2</li>
        <li>Boton 3</li>
        <li>Boton 4</li>
      </ul>
    </nav>
 
    <section id="sección">
 
      <figure>
       <img src="imagenes/avatar-fb.png" alt="avatar"/>
       <figcaption>
         avatar del usuario
       </figcaption>  
      </figure>
 
       <article>
        <header>
          <h2>Mi articulo</h2>
          <p>estoy aprendiendo estructuras <cite>html</cite></p>
        </header>
 
        <footer>
          comentarios del articulo
        </footer>
 
      </article>
    </section>
 
    <aside id="barra_lateral">
      <blockquote cite = "http://127.0.0.1:49186/index.html">Perros todos -len</blockquote>
    </aside>
 
    <footer id="creditos"><small>Derechos reservados paman</small></footer>
 
  </div>  
 
</body>
</html>

mi archivo css:

Código

* {
 margin: 0px;
 padding: 0px;
}
 
body{ /* por qué ? */
  text-align: center;
}
 
header, nav, figcaption,hgroup,footer,aside,section,article{
  display: block;
}
 
#contenedor{
  width: 960px;
  margin: 15px auto;
  text-align: left;
}
 
#cabecero{
  padding: 20px;
  background-color: cadetblue;
}
 
#menu {
  padding: 10px;;
  background-color: gray;
  height: 20px;
}
 
#menu li{
  display: inline-block;
  padding-left: 20px;
  list-style: none;
}
 
#sección {
  float: left;
  width: 600px;
  margin-top: 2px;
  margin-right: 10px;
  padding: 20px;
  background-color: brown;
}
 
#barra_lateral {
  float: left;
  width: 270px;
  height: 253px;
  margin-top: 2px;
  padding: 20px;
  background-color: brown;
}
 
#creditos{
  clear: both;
  background-color: cadetblue;
  padding: 20px;
  text-align: center;
}
 
h1 {
  font: bold 25px verdana, sans-serif;
}
 
h2 {
  font: bold 15px verdana, sans-serif;
}

Básicamente no entiendo porque hay que alinear el texto al centro del body, si luego lo vamos a volver alinear a la izquierda. Peor aún, ¿Por qué alinear el texto si por default ya estaría a la izquierda?.

Gracias.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: TØtti en 3 Marzo 2017, 04:07 am