La propiedad display

Escrito por Laura Chuburu

Muchas veces cuando estamos maquetando necesitamos que las etiquetas se comporten diferente a cómo lo hacen por defecto. Por ejemplo: es muy común querer agregarle las propiedades width y height a una etiqueta <a> para hacer un botón. O también puedo necesitar que dos etiquetas de bloque se coloquen una al lado de la otra para hacer columnas... en esos casos se usa la propiedad display. En este tutorial me refiero a los valores: block, inline, inline-block, none.

Ejemplo 1:

Si quiero definir el ancho y el alto de un botón tengo que usar la propiedad display:block, si no lo hago, la etiqueta <a> (que es de línea) ignorará por completo las medidas de width y height.

a {display:block; width:120px; height: 80px}

Ejemplo 2:

Si necesito crear dos columnas a partir de dos etiquetas <article> (que es de bloque), tengo que usar la propiedad display:inline-block porque necesito que se comporte como línea para que se coloque una al lado de la otra, pero a su vez necesito que se comporte como bloque para que acepte el valor del ancho de la columna.

article {display:inline-block; width:45%;}

Centrar elementos de línea y de bloque

Para centrar elementos de bloque, es necesario definir el ancho, y los márgenes izquierdo y derecho en auto para que el navegador calcule el margen automáticamente: margin: 0 auto

Ejemplo: centrar una div class="container"

.container {max-width:1200px; margin:0 auto}

Para centrar elementos de línea como pueden ser las imágenes de un catálogo o los links de un menú, es necesario agregar text-align:center al elemento que los contiene.

Ejemplo:

.catalogo {text-align: center} 
.catalogo img {}