Cómo Centrar Una Imagen Horizontal Y Verticalmente En CSS Y HTML

Centrar Una Imagen En CSS Y HTML / Horizontal Y Vertical

¿Cuántas veces has tenido que buscar en Google "cómo centrar una imagen en CSS"? Para mí han sido demasiadas veces para contarlas. Como resultado, he querido hacer un snippet sobre todas las formas en que se puede centrar una imagen en CSS y HTML.

El propósito de la publicación del fragmento es para que pueda tomar el código en la parte superior del post. Esto te permitirá cortar y pegar rápidamente el código que necesita para centrar las imágenes CSS.

Para este snippet vamos a referirnos al HTML de abajo. Centrar Una Imagen En CSS Y HTML / Horizontal Y Vertical

Índice

    Centrar imágenes CSS horizontalmente

    Actualmente con las imágenes CSS hay tres formas de centrar una imagen horizontalmente. Voy a repasar las tres formas, los pros y los contras de cada una para que puedas centrar una imagen con CSS en cualquier situación.

    Lee: El Navegador Más Seguro Epic / Opiniones

    Centrar una imagen CSS con Alineación de Texto

    .center {
    text-align: center;
    }

    Es importante tener en cuenta con este método que la propiedad de alineación de texto solo funciona en elementos de nivel de bloque.

    Centrar Imagen CSS con Margen

    .center {
    display: block;
    margin: auto;
    width: 50%;
    }

    Centrar una imagen con margin:auto es una buena manera de hacer el trabajo. Sin embargo, debes asegurarte de que se utiliza con otras dos propiedades.

    La primera es display:block ya que la propiedad margin:auto solo funciona en elementos de nivel de bloque. Como los elementos Img son elementos en línea, tendrás que convertirlos en elementos de nivel de bloque.

    La segunda propiedad es la propiedad width. Para que los márgenes se muevan hacia el centro es necesario asegurarse de que haya un espacio vacío. Por lo tanto, debes establecer el ancho a menos del 100%.

    Centrar una imagen CSS horizontalmente con Flex

    .img-container {
    display: flex;
    justify-content: center;
    }
    .img {
    width: 50%;
    }

    Establecer el contenedor padre de la imagen como display:flex te permite centrar la imagen horizontalmente. Para mover la imagen al centro del contenedor debe especificar que la propiedad justify-content tenga un valor de center.

    Al igual que con el método de centrado horizontal del margen, debes asegurarte de establecer la imagen a menos del 100% del ancho del contenedor padre.

    Ten en cuenta con este método que todo lo demás en el contenedor padre se centrará horizontalmente.

    Todos estos tres métodos deberían permitirte centrar cualquier imagen horizontalmente. Veamos cómo centrar una imagen verticalmente.

    Centrar una imagen CSS verticalmente

    En particular, con las imágenes CSS hay dos formas clave para centrar una imagen verticalmente. Voy a repasar las dos formas, los pros y los contras de cada una para que puedas centrar una imagen verticalmente con CSS en una situación.

    Centrar una imagen CSS con Posición Absoluta

    CSS
    .img-container {
    position: relative;
    }
    .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }

    Para centrar una imagen CSS verticalmente, puedes utilizar la propiedad position con un valor de absolute en el elemento img. Lo primero que tienes que hacer, es configurar el contenedor padre para que tenga un valor de posición relativo. Esto es imprescindible y puedes aprender por qué en mi ridículamente sencilla guía sobre la propiedad position.

    A continuación, establece las propiedades izquierda y superior al 50%. Lo que esto significa es que alineas los bordes izquierdo y superior de la imagen con el centro del navegador. Sin embargo, esto hace que la imagen parezca estar descentrada.

    Por lo tanto, se utiliza la propiedad de transformación con el método translate para mover el div -50% a lo largo de los ejes x e y. Esto hará que la imagen se alinee bien con el centro vertical de la posición de los elementos padre en la página.

    Centrar una imagen CSS verticalmente con Flex

    CSS
    .img-container {
    display: flex;
    align-items: center;
    }
    .center {
    width: 50%;
    }

    Al igual que con el centrado horizontal podemos centrar una imagen utilizando flex-box. Esta vez para mover la imagen al centro del contenedor debes especificar que la propiedad align-items tenga un valor de center.

    Al igual que con el método de centrado horizontal del margen, debes asegurarte de establecer la imagen a menos del 100% del ancho del contenedor padre.

    De nuevo, con este método todo lo demás en el contenedor padre se centrará verticalmente.

    Centrar Una Imagen En CSS Y HTML / Horizontal Y Vertical

    Hasta ahora hemos visto cómo centrar una imagen CSS tanto horizontal como verticalmente. Pero no hemos visto cómo hacer ambas cosas a la vez.

    Veamos cómo centrar una imagen horizontal y verticalmente al mismo tiempo.

    .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .center {
    width: 50%;
    }

    Podemos utilizar flex-box para centrar una imagen horizontal y verticalmente. Para ello debemos utilizar la propiedad justify-content y align-items en el contenedor padre de la imagen. Todo lo que tenemos que hacer es darles a ambas el valor de center y bobs your uncle, esa imagen está centrada tanto horizontal como verticalmente.

    Estos son los métodos más comunes para centrar una imagen tanto horizontal como verticalmente en CSS. En la mayoría de los casos, esto será suficiente para que tu imagen quede en la posición que quieres en la página.

    Cómo centrar una imagen en una página web utilizando HTML

    Aunque no es necesariamente difícil, centrar imágenes en tus páginas web puede ser más complicado de lo que crees. La razón principal es que la etiqueta <img> es un elemento en línea, por lo que se comporta de forma diferente a los elementos a nivel de bloque.

    Algunos métodos utilizan HTML; otros, CSS, y algunos se consideran más "adecuados" que otros en el sentido de que no están obsoletos. Para proceder, selecciona un método de la lista siguiente y sigue las instrucciones.

    Utilizar el atributo style

    Para la compatibilidad con HTML5, utiliza un atributo style con el valor text-align:center dentro de un elemento a nivel de bloque; como una etiqueta <p></p>.

    Ejemplo de código HTML

    <p style="text-align:center;"><img src="https://www.tutopremium.com/cdn/media/logo-200-gray.png" alt="Logo"></p>

    Nota: La colocación del código anterior en un div puede afectar a su apariencia en la pantalla. Por ejemplo, si se añade el código a un div con un margen derecho, cambia la ubicación de la imagen centrada.

    Consejo: La adición de un estilo en línea como se muestra arriba debería hacerse idealmente solo una vez en un documento. Si necesitas centrar varias imágenes, utiliza la siguiente sugerencia y cree una clase CSS para ayudar a reducir el código redundante y acelerar tu página web.

    Convertir en un elemento a nivel de bloque

    Una forma de centrar correctamente las imágenes es definir el elemento <img> como un elemento de nivel de bloque. Para ello, añada una regla al encabezado de su página (que se muestra en el siguiente ejemplo), o un archivo CSS externo vinculado.

    Ejemplo de código HTML

    <style type="text/css">
    .centerImage
    {
     text-align:center;
     display:block;
    }
    </style>

    Con este código, puedes aplicar la clase centerImage a una etiqueta <img> sin tener que anidarla en un elemento a nivel de bloque. Este método funciona para múltiples imágenes.

    Ejemplo de código de imagen centrada

    <img src="https://www.tutopremium.com/cdn/media/logo-200-gray.png" class="centerImage" alt="CH Logo" height="120" width="350">

    Uso de la etiqueta <center>

    Puedes centrar una imagen encerrando la etiqueta <img> en las etiquetas <center></center>. Esta acción centra esa, y solo esa, imagen en la página web. Hay que tener en cuenta que este método está obsoleto en HTML5 y no siempre funcionará en todos los navegadores en adelante.

    Solo recomendamos utilizar este método si ninguna de las otras sugerencias mencionadas anteriormente funcionan cuando se trata de centrar una imagen.

    Ejemplo de código HTML

    <center><img src="https://www.tutopremium.com/cdn/media/logo-200-gray.png" alt="what image shows" height="150" width="200"></center>

    TE PUEDE INTERESAR

    Deja un comentario

    Tu dirección de correo electrónico no será publicada.

    Go up