Cómo alinear una imagen en CSS

Al momento de alinear y posicionar imágenes dentro de una página web, algunas personas optan por realizar este proceso desde el código #html  sin embargo, esta forma tiene algunas carencias y puede generar ciertas dificultades. Es por ello que es preferible usar css para dicho propósito.  A continuación, mostraremos algunas de las técnicas más comunes para alinear imágenes en CSS.

Centrar una imagen con CSS

Centrar imágenes con CSS resulta ser bastante sencillo, una de las maneras más comunes consiste en darle a la imagen la propiedad margin con valor “auto”; sin embargo, para que funcione, hay que cambiar la propiedad display de la imagen (que por defecto es inline-block) a block.

index.html

<div>
        <img src="https://placeimg.com/640/480/any" alt="fotos">
        </div>

estilo.css

img {
           margin: auto;
           display: block;  
        }
        
        div {
           width: 600px;
        }

Alinear imágenes respecto a un texto

Por lo general, se emplean dos propiedades para realizar esta tarea: vertical-align y float.

Vertical-align

Para poder alinear imágenes con texto con esta propiedad, primero se debe incluir, en el código HTML, la imagen junto al texto con el cual se desea alinear.

<p>
        <img src="https://placeimg.com/640/480/any" alt="fotos"> Texto de prueba
        </p>

En este caso se introdujo la imagen dentro de las etiquetas <p> y </p>. A partir de aquí, ya se puede empezar a utilizar el CSS para modificar las alineaciones con los valores admitidos por vertical-align: Bottom: Si se establece este valor, el texto se alineará con la base inferior de la imagen.

img {
           vertical-align: bottom;
        }

Middle: Al establecer este valor, se conseguirá alinear el centro del texto con el centro de la imagen, pero solamente la primera línea del texto; en caso de que el texto tenga varias líneas, seguirán por debajo de la imagen.

img {
           vertical-align: middle;
        }

Top: Al darle este valor, se alineará la parte superior de la imagen con la parte superior del texto. Y al igual que en el caso anterior, si el texto sigue, la siguiente línea se ubicará debajo de la imagen.

img {
           vertical-align: top;
        }

 

Float

Esta propiedad es la más común y utilizada para alinear imágenes con texto, pues permite que un elemento, en este caso una imagen, flote hacia un lado u otro en el espacio que tenga disponible, inclusive cuando tienen que compartir la línea con otro elemento. Los valores que admite son:

• none
• right
• left
• Inherit

La ventaja que tiene esta forma ante las anteriores es que, si el texto ocupa varias líneas, estas seguirán alineadas con la imagen; es decir, no se mostrarán debajo de la ella.

<img src="https://placeimg.com/640/480/any" alt="fotos">
        <p>Alineando imagen a la izquierda con float</p>

img {
            float: left;
        }