¿Te gustaría centrar una imagen usando CSS? Los problemas de alineación suelen ser una fuente de frustración para los diseñadores web. Afortunadamente, centrar una imagen con CSS es realmente simple y te mostraremos cómo hacerlo en unos pocos pasos.
Al igual que con muchas tareas de diseño web, ¡hay más de una forma de hacerlo! Cubriremos algunos de los métodos principales en este artículo. ¡Empecemos! Verificar Cómo editar páginas web en Safari con Inspect Element.
1. Usa la función de margen
Establecer la propiedad de margen es una de las formas más fáciles de centrar una imagen horizontalmente usando CSS. Los márgenes son un componente esencial de una plantilla de caja CSS.
Primero, deberá convertir el elemento de imagen de un elemento en línea a un elemento de bloque. Los elementos HTML a nivel de bloque ocupan todo el ancho de su elemento principal y pueden consumir todo el ancho de una página.
Al convertir el elemento de imagen en un elemento de bloque, puede manipular su posición ajustando sus márgenes horizontales. También deberá establecer un ancho específico para la imagen, para determinar cuánto espacio ocupa la imagen en la página.
Cualquiera que sea el ancho que elija, la imagen debe tener márgenes iguales a la izquierda y a la derecha. Puede lograr esto fácilmente dando a la propiedad Margen un valor automático:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
} 2. Usa el diseño Flexbox
Este método requiere colocar la imagen en un elemento a nivel de bloque, generalmente un div:
<div class=”center”> <img src=”xyz.jpg”> </div>
Una vez que haga eso, puede agregar algunas propiedades para controlar su apariencia. Estarás usando dos propiedades CSS.
La primera es la propiedad de ancho con su valor establecido en flex. También puede usar flex para alinear elementos en HTML. La segunda propiedad que agregará al div es allow-content , con su valor establecido en el centro de la siguiente manera:
div.center {
display: flex;
justify-content: center;
} 3. Utilice el elemento de centrado
Las mejores prácticas web lo alientan a usar CSS para el estilo y HTML para la semántica, por lo que no debe usar este método HTML. La etiqueta central, que centra su contenido horizontalmente, está obsoleta en HTML5.
Pero si es necesario, aquí se explica cómo centrar una imagen usando solo HTML. Simplemente envuelva la etiqueta img dentro de la etiqueta central de esta manera:
<center> <img src=”xyz.jpg”> </center>
Así es como alinear sus imágenes HTML
Le mostramos tres formas diferentes y fáciles de usar para centrar sus imágenes en un documento HTML. Pruébalos todos y elige el mejor para ti. ¡Evita el tercer método a menos que no tengas absolutamente ninguna opción!
Una cosa a tener en cuenta es que hay bastantes otras formas de centrar imágenes usando HTML y CSS. Un método común que funciona tanto con texto como con imágenes en línea es la función de alineación de texto. Ahora puedes ver Juegos divertidos para ayudarte a aprender programación CSS fácilmente.
