Cómo centrar una imagen en HTML

Para alinear imágenes en HTML, puedes utilizar el atributo align, el cual es el encargado de cambiar la posición de la imagen. Se puede hacer a la izquierda y a la derecha sin problemas. Es un atributo que no es exclusivo, sino que es posible emplearlo en varias etiquetas.

Una de las etiquetas más comunes es la de . Por ejemplo, si quieres saber cómo centrar una imagen horizontalmente en HTML, se usa el atributo align en la etiqueta, y quedaría un resultado como el siguiente:

Para esta situación, la imagen estaría sustituyendo el texto. No obstante, si vas a usar solo la etiqueta , aunque acepte el atributo align, la utilidad difiere del caso anterior. Dicho atributo permite mover los valores de derecha o izquierda, al igual que justificar la imagen en la posición que quieras. Si deseas crear este efecto, este sería el código:

Texto

La imagen quedaría alineada hacia la derecha, y el texto que coloques irá justo en la parte izquierda. Si deseas cambiar la posición, simplemente sustituye “right” por “left” y tendrás el efecto contrario.

¿Y si quieres la imagen en el centro? En este caso, los pasos a seguir también son muy sencillos, pues solo debes envolver la imagen utilizando etiquetas center. El código quedaría así:

El “src” sirve como indicativo de la ruta de la imagen y el “alt” es el que da información a la página web sobre el nombre del archivo. No te olvides de asignar anchura y altura a la imagen de la siguiente manera:

height=”300” width=250”

Centrar imágenes con HTML y middle

Otra de las alternativas más rápidas para centrar imágenes es valerse de una alineación de middle. El código quedaría del siguiente modo:

align=”middle”>

Igualmente, si quieres añadir texto, el código se debe escribir así:

Texto align=”middle”> Texto.

Por otra parte, es una buena idea conocer otros tipos de valores que el atributo align puede adoptar dentro de la etiqueta de imágenes. Son relativos respecto a la alineación vertical y ayuda a obtener resultados más precisos. De dicha forma, la relación entre el texto el imagen será uniforme y tendrá una mejor apariencia. Los valores adicionales que corresponden al atributo align son los siguientes:

• Top: este valor ajusta la imagen en la zona más alta de la línea de forma específica. Como resultado, si una imagen es más alta que otra, ambas se presentan en el borde superior con una altura semejante.
• Bottom: es un valor que ajusta automáticamente el bajo de la imagen al texto para una mejor visualización.
• Absbottom: parecido al anterior, salvo que este valor coloca el borde inferior del imagen al mismo nivel del elemento más bajo de toda la línea.
• Middle: es un valor que hace coincidir el medio vertical de la imagen con la base de la línea del texto, lo que crea más uniformidad.
• Absmiddle: dicho valor tiene la finalidad de ajustar la imagen al medio absoluto presente en la línea establecida.

Es cierto que aprender a manejar todas estas opciones es algo complicado, pero con la práctica te será cada vez más sencillo. A fin y al cabo, HTML es un lenguaje fácil de aprender y dominar.

A partir de la llegada de HTML5, el atributo align ha quedado obsoleto y, actualmente, lo mejor es usar CSS para alinear las imágenes. Se realiza una combinación de HTML y código CSS que, aunque al principio pueda parecer difícil, en la práctica es mucho más fácil de lo que parece.

Para centrar una imagen con CSS, se debe empezar por el código HTML, siguiendo un ejemplo como este:

Con esto le has puesto la clase a la imagen, la cual recibe el nombre de centrado. Posteriormente, te va a servir para darle el estilo que prefieras en el CSS. El código para que la imagen quede centrada sería el siguiente:

.centrado{

margin:10px auto;

display:block;

}

Otro de los códigos efectivos para alinear una imagen en HTML con CSS es:

.centrado{

margin-left: auto;

margin-right: auto;

}

¿Qué hacer si no funciona?

A pesar de que, en la mayoría de los casos, esto es suficiente, es probable que el navegador no reconozca el código. Si esto te ocurre, debes indicar al navegador que la imagen es un elemento en forma de bloque. Como resultado, se puede centrar justo como si se tratase de un bloque adicional.

Se le dará un margen automático, que es suficiente para que tenga la apariencia adecuada. El código a usar es el siguiente:

img.center {

display: block;

margin-left: auto;

margin-right: auto;

}

Bootstrap es un framework muy popular y sencillo de utilizar. Para centrar una imagen en HTML con Bootstrap basta con ponerla como clase center-block. Sería algo como lo siguiente:

Por supuesto, hay que descargar Bootstrap o, en todo caso, colocar su CDN en HTML.

Si deseas leer más artículos parecidos a Cómo centrar una imagen en HTML, te recomendamos que entres en nuestra categoría de Desarrollo web.