La propiedad display

Muchas veces cuando estamos maquetando necesitamos que las etiquetas de línea y de bolque se comporten diferente a cómo lo hacen por defecto. Por ejemplo: para hacer un botón es necesario definir las propiedades width y height a una etiqueta <a>  que es de línea. O también podemos 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.

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:

Pero si ese botón forma parte de un menu horizontal, entonces uso display: inline-block (de bloque para que reconozca ancho y alto, y de línea para que se coloque uno al lado del otro)

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

Ejemplo 3:

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 {}
Carrito de compra
USD Dólar de los Estados Unidos (US)