Las imágenes son una parte importante de cualquier aplicación web. Generalmente no se recomienda incluir muchas imágenes en una aplicación web, pero es importante utilizar las imágenes donde sea necesario. CSS nos ayuda a controlar la visualización de imágenes en aplicaciones web.
Alinear una imagen significa colocar la imagen en el centro, izquierda y derecha. Podemos usar el flotar propiedad y texto alineado Propiedad para la alineación de imágenes.
Si la imagen está en el elemento div, entonces podemos usar el texto alineado propiedad para alinear la imagen en el div.
Ejemplo
En este ejemplo, estamos alineando las imágenes usando el texto alineado propiedad. Las imágenes están en el elemento div.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Pruébalo ahora Producción
Usando la propiedad flotante
La propiedad flotante de CSS es una propiedad de posicionamiento. Se utiliza para empujar un elemento hacia la izquierda o hacia la derecha, permitiendo que otros elementos lo envuelvan. Generalmente se usa con imágenes y diseños.
Los elementos flotan sólo horizontalmente. Por lo tanto, sólo es posible hacer flotar elementos hacia la izquierda o hacia la derecha, no hacia arriba o hacia abajo. Un elemento flotante se puede mover lo más hacia la izquierda o hacia la derecha posible. Simplemente, significa que un elemento flotante se puede mostrar en el extremo izquierdo o derecho.
Ejemplo
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Pruébalo ahora Producción
