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> </hgroup> </header> <nav id="menu"> <ul> </ul> </nav> <section id="sección"> <figure> <img src="imagenes/avatar-fb.png" alt="avatar"/> <figcaption> avatar del usuario </figcaption> </figure> <article> <header> </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> </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.