Pasamos cada día creciendo a través de múltiples navegadores web para nuestro trabajo, estudios o entretenimiento. Es increíble pensar que los programadores pueden hacer infinitas posibilidades en la estructura, diseño y comandos a través de un HTML o Lenguaje de Marcado de Hipertexto. Por mucho que el contenido sea esencial en un sitio web, incluir varias imágenes a través de tu HTML puede hacer que tu programa destaque. La colocación horizontal es más fácil de ver, ya que nuestro movimiento ocular lee de izquierda a derecha, y por eso, si eres un programador novato y quieres aprender a alinear varias imágenes en HTML horizontalmente, ¡no te preocupes más! En este artículo, vamos a enumerar las cinco formas de alinear varias imágenes en HTML horizontalmente.
Antes de continuar con las 5 formas, ¡me gustaría dar las gracias a bolchevaerk.dk que ha ayudado a realizar este artículo!
1. Flexbox
Un flexbox o modelo de caja flexible es un método de maquetación relativamente nuevo para que los programadores ajusten la estructura de maquetación vertical u horizontal de un sitio web mediante filas o columnas. Puedes cambiar la longitud o anchura de la imagen para que ocupe o se reduzca a un espacio determinado de la maquetación mediante el contenedor flexbox. Otra función que ofrece el uso de la caja flexible es la predicción de la proporción y ubicación de una imagen en función del tamaño de la pantalla y del dispositivo de visualización del espectador.
Para utilizar Flexbox para alinear imágenes en HTML, aquí tienes horizontalmente los pasos que debes seguir:
- Abre un nuevo documento HTML para evitar mezclar tus nuevos comandos y códigos con el documento principal.
- Inserta las imágenes que desees en el nuevo documento. Como vas a utilizar Flexbox, necesitas poner un div debajo del cual pondrás «images-container». El número de
que incluyas dependerá del número de imágenes que quieras que haya en la línea horizontal.
- Incluye el siguiente CSS en tu HTML:
- Escribe «images-container» e incluye las propiedades «display: flex;» y «justify-content: center;». Como se ha mencionado antes, Flexbox ayuda a predecir el ajuste de una imagen en proporción a la pantalla de un dispositivo, así que ese es el uso de «display: flex». En cuanto a «justify-content: center», esto coloca todas tus imágenes codificadas en el sitio web en el centro, horizontalmente.
- Aunque es opcional, puedes mejorar la presentación visual de las imágenes horizontales de tu sitio web añadiendo el margen que desees para cada imagen. Para ello, debes escribir otro «images-container» e introducir «margin-left:» y luego insertar el rango de píxeles o px que hayas seleccionado. Haz también este procedimiento para «margen-derecha». Como referencia, 96 píxeles equivalen a una pulgada.
2 . Prevent Wrapping
Una de las cosas más molestas que experimenta un programador, diseñador o incluso un estudiante cuando escribe en un documento que implica un texto que necesita insertar una imagen es el wrapping. El wrapping se produce cuando el texto envuelve las imágenes en una posición concreta, haciendo que ambos elementos converjan en lugar de colocar inicialmente las imágenes en una posición determinada. En el CSS de tu HTML, el wrapping se produce cuando un texto se ajusta automáticamente alrededor de la imagen, moviendo las palabras o la imagen a una línea diferente, impidiendo la alineación horizontal de tus deseadas fotos múltiples. Para evitar la envoltura, debes seguir los siguientes pasos:
- Bajo el elemento principal #content, incluye el «whitespace:nowrap». Nowrap elimina los espacios en blanco típicos de tu sitio web, pero impide que las imágenes se salgan de sus líneas.
- La alternativa a «whitespace:nowrap» es «word-break:keep-all». Sin embargo, esto funciona generalmente en el ajuste de texto, pero sigue siendo significativo si tienes texto junto a tu serie de imágenes que pueda afectar a su alineación.
3. Método Display:inline-block
El objetivo principal de display:inline-block es colocar una imagen o cualquier elemento en un bloque contenedor que esté en el mismo nivel de alineación junto con otras piezas que incluyas en él. Una vez que una imagen está en esta propiedad, puedes seguir ajustando sus valores de anchura y altura sin que su contenido deje de ser adyacente. Esta propiedad te permite tener varias imágenes en horizontal siempre que las coloques en estos bloques de visualización. Puedes hacerlo insertando «display:inline-block» en tu HTML.
4. Cambiar display:block por float:left
Una flotación es una propiedad que hace que tu imagen mueva su posición -normalmente hacia la parte izquierda o derecha- en el contenedor en el que la has asignado, lo que hace que los textos (molestos) se enrollen a su alrededor. Si has colocado varias imágenes en un contenedor sin especificar en qué dirección deben flotar, lo más probable es que todas sus alineaciones sean horizontales. Para evitarlo, debes
- Escribe «
para evitar que los textos siguientes envuelvan o floten hasta las imágenes que contienen. Después de hacer esto, tu sitio web tendrá una línea horizontal invisible que hará que todas las imágenes o textos nuevos comiencen desde un párrafo separado.
- Escribe «float: left» a la clase .images para que su colocación en el contenedor comience por la izquierda. Al hacer esto, te aseguras de que todas las imágenes siguientes también seguirán su alineación. Así, verás varias fotos en una alineación horizontal en tu HTML.
5. Comprueba si el Cuerpo del Elemento está al 100%
Hay algunos casos en los que varias imágenes no pueden alinearse horizontalmente porque la altura no es del 100%. Puedes probar a escribir «margin 0: auto» o «text-align: center» a tus imágenes en un elemento de bloque. Debes incluir cualquiera de los dos textos dados bajo el comando padre. Sin embargo, esta solución no funciona en todos los navegadores, pero sí en la mayoría. No debes preocuparte si tu navegador HTML pertenece a Microsoft Edge, Google Chrome, Opera o Safari, ya que esta función funciona para ellos.
Si buscas un excelente servicio de manipulación de imágenes, visita fixthephoto.com y comprueba qué cosas geniales pueden hacer con tus imágenes para que tengan un aspecto aún mejor.
Lo que hay que aprender de la guía: Cómo alinear horizontalmente varias imágenes en HTML
Puedes hacer que un sitio web aburrido y «desplazable» se convierta en una atracción insertando imágenes llamativas. Sin embargo, hacer tu sitio web puede llevarte mucho tiempo, ya que necesitas introducir muchos códigos. Saber cómo alinear horizontalmente varias imágenes en HTML puede ser una ventaja, tanto si eres un programador web apasionado, un trabajador autónomo o un diseñador web veterano. Es de esperar que, después de aprender las tres formas de realizar la tarea, encuentres una solución más fácil o más complicada que la otra, y eso está bien. Como programador, debes hacer el procedimiento que te resulte más eficaz y cómodo, por largo o corto que sea, siempre que no pongas en riesgo la calidad de tu resultado.
Lee también nuestra guía sobre Cómo borrar los datos del formulario después de enviarlo en HTML
