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

TØtti · 3 Marzo 2017, 04:07 AM

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 (html4strict) [Seleccionar]

<!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 (delphi) [Seleccionar]

* {
 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.

dato000 · 3 Marzo 2017, 14:37 PM

Pues ese tipo de sobrecargas dependen del diseño, puede que existan otros divs que esten alineados de forma diferente, a la izquierda como mencionas, pero puede que la mayoria por defecto deban quedar en el centro.

Eso simplemente son consideraciones del diseñador para la manipulación de los elementos.

Test Foro de elhacker.net SMF 2.1

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

TØtti

dato000