Modificar la presentación de los elementos

La forma específica en que se comportan los elementos HTML, dependiendo de si son bloques, o elementos en línea, condiciona el modo en que trabajamos con esos elementos. Vamos a ver algunas de sus características relacionadas con la presentación.

Centrar una imagen en pantalla

A pesar de su apariencia visual como bloques, las imágenes son elementos HTML en línea, con las características propias de cualquier otro elemento en línea. Eso implica, entre otras cosas que no puedan ser centradas horizontalmente respecto al documento o a su elemento contenedor, en caso de que lo tenga, usando la propiedad margin: auto;. Por lo tanto, para conseguir ese resultado tenemos que seguir alguna de estas estrategias.

Colocar la imagen en un bloque y centrar su contenido

En este caso podemos usar un elemento <p> y colocar la imagen dentro. A continuación centramos el contenido mediante CSS con text-align.

Ejemplo de como centrar una imagen colcándola dentro de un párrafo, y aplicando al párrafo la propiedad text-align: center;


	<p class="centrado"><img src="venecia.jpg">
	
	.centrado {
		text-align: center;
	}

Tenemos:

Colocando la imagen dentro de un bloque con la anchura modificada

Este modo de trabajo permite centrar la imagen junto con más contenido en un único bloque. Es útil cuando necesitamos que varios elementos además de la imagen se comporten de manera uniforme.

En este caso lo que hacemos es colocar todo el contenido a centrar dentro de un bloque (un <div> o cualquier otro) y ajustar la anchura del bloque a la de la imagen, a continuación centramos el bloque con margin: auto;


	<div class="cont-img">
	<img src="venecia.jpg">
	<h5>Este texto es el pie de foto y acompaña a la imagen</h5>
	</div>

Y el CSS


	.cont-img {
		border: 1px solid;
		margin: 0 auto;
		width: 60%;
	}
	.cont-img img {
		width: 100%;
		height: auto;
	}

Veremos:

Este texto es el pie de foto y acompaña a la imagen

Lo que hemos hecho en este caso ha sido colocar la imagen y el elemento h5, que funciona como pie de foto, dentro de un div. Ajustamos la anchura del div, por ejemplo width: 60%; y lo centramos con margin: auto;. Para ajustar la imagen al contenedor definimos su anchura al 100% y su altura de forma automática para evitar que se deforme.

Propiedad display

Como ya sabemos, la forma en que se presentan por defecto los elementos HTML en el documento depende de que estos sean elementos de bloque o en línea. Recordamos que los elementos de bloque ocupan siempre el 100% de la anchura disponible en el contenedor, y empiezan siempre "en línea nueva", es decir, no van a continuación de otro elemento HTML, sino debajo del elemento anterior. Mientras que los elementos en línea se sitúan en el primer hueco disponible en el flujo de documento, a continuación del elemento anterior.

Mediante CSS podemos cambiar este comportamiento usando la propiedad display. Dentro de los valores posibles, entre otros, están inline y block que permiten invertir la presentación de los respectivos elementos. Vamos a ver algunos casos:

Bloque que se muestran en línea

Dado el siguiente código

	
		<div class="enlinea">Div 1</div>
		<div class="enlinea">Div 2</div>
		<div class="enlinea">Div 3</div>
		<div class="enlinea">Div 4</div>
		<div class="enlinea">Div 5</div>

Y su CSS:


	.enlinea {
		border: 4px solid;
		background-color: lightgreen;
		display: inline;
		margin: 1%;
		padding: 5px;
	}

Nos devuelven este resultado:

Div 1
Div 2
Div 3
Div 4
Div 5

Como vemos, en los elementos con el display: inline; su comportamiento es excatamente ese, elementos en línea de los que no se puede definir muchos atributos relacionados con el modelo de caja. Por ejemplo su anchura, sólo se define a partir del contenido del elemento, ocupando el espacio que ocupa el texto que contiene, y dando únicamente la posibilidad de tener espacio extra usando la propiedad "padding".

Ejemplo de cambio display en listas

Los elementos de lista (tanto de ul como de ol) tienen una presentación en bloque que hace que por defecto se muestren uno debajo de otro. A menudo, y especialmente cuando queremos construir un menú de navegación, necesitamos mostrarlos alineados. En este caso cambiar a display: inline; resulta muy útil:

Teniendo la siguiente lista:


	<nav>
		<ul>
			<li><a href="#">Enlace 1</a></li>
			<li><a href="#">Enlace 2</a></li>
			<li><a href="#">Enlace 3</a></li>
			<li><a href="#">Enlace 4</a></li>
			<li><a href="#">Enlace 5</a></li>
		</ul>
	</nav>

Podemos cambiar su presentación a forma de menú con la siguiente clase aplicada a los elementos li: 


		.nav_linea {
			display: inline;
			border: 1px solid;
			background-color: lemonchiffon;
			list-style: none;
			margin: 0 -2px;
			padding: 5px 10px;
		}

Obteniendo un menú con los elementos alineados, en lugar de tenerlos uno debajo de otro, como es lo normal en los elementos li.

Enlaces que se muestran en bloque

Al aplicar una clase a los elementos a que modifica su display los convertimos en bloques


		 <a href="#" class="bloque">Enlace 1</a>
		 <a href="#" class="bloque">Enlace 2</a>
		 <a href="#" class="bloque">Enlace 3</a>
		 
Y el CSS

		.bloque {
			display: block;
			border: 1px solid yellow;
			padding: 0.5rem;
		}

Devuelve

Enlace 1 Enlace 2 Enlace 3

Al aplicar la propiedad display: block; a un elemento en línea, este recoge todos los atributos de los bloques y lo podemos trabajar como tal: Ocupa el 100% del espacio de su contenedor, empieza en línea nueva y podemos definir propiedades de anchura y altura.

Imagen como bloque y centrada

Con esta propiedad, y volviendo al tema del principio del documento, también podemos hacer que una imagen se centre automáticamente en horizontal cambiando su presentación:


			<img src="venecia.jpg" class="bloque">
	
			.bloque {
				display: block;
				border: 1px solid yellow;
				padding: 0.5rem;
			}
			img.bloque {
				margin: auto;
			}

Centrará la imagen directamente

Propiedad display:inline-block

Una propiedad muy interesante es inline-block, que combina propiedades de los dos modos en un mismo elemento. Permite tener bloques uno al lado de otro. De forma que al ser bloques podremos definir atributos como anchura, altura y márgenes, pero se mostraran en línea siempre que el espacio lo permita.

El ejemplo sería el mismo del menú usando una lista del apartado anterior. Si nos fijamos en ese ejemplo, al definir los elementos li como inline, perdemos su atributo de anchura, quedando esta definida por el contenido. Cuando el texto de los enlaces cambia, el resultado son cajas de enlaces con diferentes anchuras, lo cual puede ser un efecto no deseado en nuestro diseño.

Si tenemos el menú anterior:

Para conseguir que los elementos del menú tengan la misma anchura y queden en línea, modificamos la clase de esta forma:


	.nav_bloque {
		display: inline-block;
		border: 1px solid;
		background-color: lemonchiffon;
		list-style: none;
		margin: 0 -2px;
		padding: 5px 10px;
		width: 110px;
		text-align: center;
	}

Quedando así

Display con elementos de tablas

La propiedad display ha ido aumentando su número de valores con el paso del tiempo, convirtiéndose en una herramienta muy útil para resolver problemas de presentación de contenido que antes obligaban a dar grandes rodeos para obtener el resultado deseado. A veces incluso usando el código de una manera inconveniente según los propios estándares del W3C.

Los navegadores cada vez dan mejor soporte a los diferentes valores de la propiedad, permitiendo que con una simple línea de código CSS cambiemos toda la estructura de un documento. Es lo que ocurre con los modos de display relacionados con la presentación de tablas HTML. Podemos hacer que cualquier elemento de HTML se comporte a efectos de presentación y visualización como una celda de una tabla, una fila o columna de la tabla, o incluso una tabla completa. Al hacerlo, el elemento incorpora las opciones de presentación propias de la parte de la tabla a la que emulan.

Los valores disponibles para esta propiedad vinculados al uso de las tablas son:

Un uso muy habitual es el de conseguir centrar en vertical cualquier elemento en HTML. El centrado vertical es una característica que no está disponible para los elementos en bloque o en línea en HTML, pero sí es algo posible para una celda de una tabla. Podemos conseguir que un elemento se centre en vertical sobre otro, sin necesidad de usar una tabla, recurriendo a display:


		<div class="celda">
			<h4>Este elemento está centrado en vertical</h4>
		</div>
			
Y este CSS

		.celda {
			height: 250px;
			display: table-cell;
			vertical-align: middle;
			border:1px solid;
			padding: 20px;
		}

Nos devuelve un elemento h4 centrado verticalmente en su div contendor.

Este elemento está centrado en vertical

Display: none;

Usando esta propiedad podemos ocultar la presentación de un elemento. Al ocultarlo de esta manera lo eliminamos del flujo del documento, quedando su espacio ocupado por el elemento siguiente del código HTML. No es que quede oculto en el documento, sino que tenemos que entenderlo como que no es cargado en el documento, ignorando todas las propiedades de presentación que pudiera tener a través de CSS.

Pero el elemento sí está realmente en el documento, y con un sencillo cambio de su propiedad display a block, inline, inline-block, etc. conseguiremos que el documento lo "recupere" y se muestre con todas las propiedades.

Es un recurso muy habitual para conseguir dinamismo visual en el documento, ocultando de entrada ciertos elementos aplicándoles un display: none;, y modificando luego esa propiedad según necesitemos mostrar cada elemento.