Cómo centrar de forma horizontal y vertical una imagen
Continuando con el trabajo con imágenes, en esta ocasión vamos a ver cómo podemos centrar de forma horizontal y vertical una imagen. En realidad, este código sirve para centrar horizontal y verticalmente cualquier elemento de tu página web.
Centrar horizontalmente una imagen (o cualquier objeto), es bastante sencillo, el problema nos viene cuando necesitamos centrarla verticalmente. Aquí entran en juego varios factores, como son, la altura del contenedor donde está nuestra imagen. Determinar esta altura para poder jugar con ella es donde se complica la cosa.
Código que vamos a utilizar
El código que vamos a usar en este ejemplo es relativamente sencillo, un poco de CSS que a estas alturas no debería asustar a nadie 🙂
En primer lugar vamos a crear el código CSS que centrará la imagen horizontal y verticalmente, y a continuación crearemos el código HTML.
¡Vamos a ello!.
Este código crea dos cajas, la de dentro centrará la imagen verticalmente, y la de fuera la centrará horizontalmente. Tan solo tienes que cambiar la url de la imagen por la que tu has insertado y vas a centrar en tu web.
Y como siempre, ¿dónde ponemos este código?
¿En serio me lo estás preguntando?… es broma, no te preocupes, lo vamos a ver ahora mismo 😀
Como son códigos sencillos, el código CSS lo pegaremos en el Personalizador de nuestro WordPress (Apariencia, Personalizar, CSS adicional), y el código HTML lo pegarás directamente en modo código en tu entrada o página donde quieras centrar la imagen.
El resultado será este:
Deja que WordPress trabaje por ti, utiliza código.