El HTML y el CSS son lenguajes web que estructuran tanto páginas web como apps. En concreto el lenguaje HTML fomenta la estructura principal del diseño web. Mientras que, con el CSS podrás crear diseños con estilos dinámicos o animados para la presentación de dicha web o aplicación.
Centrar una imagen usando HTML
El lenguaje HTML es menos utilizado para el diseño, pero ofrece la ventaja de ser mucho más ligero y que se puede aplicar a casi todos los atributos dentro de la web.
Etiqueta center para centrar
La primera opción de código que podrás implementar es la etiqueta “center” o <center>.
En la cual se identifica “src” desde “img” para la ruta principal de la imagen y el nombre del atributo de la imagen con “alt”.
<center>
<img src=» tecnohowto.png» alt=»Descripción de la imagen»>
</center>
Posteriormente, podrás establecer las medidas de ancho y largo de la imagen a través del comando “height” y “width” de la siguiente manera
<center>
<img src=»tecnohowto.png» alt=»Descripción de la imagen»> height=”250” width=200”
</center>
Establecer etiquetas middle
El código Middle ofrece una ventaja en la acción de alinear o centrar una imagen con HTML y tomar en cuenta el texto alrededor. Quedando de la siguiente forma
<img src=»tecnohowto.png» alt=»Descripción de ejemplo en imagen» align=”middle” />
Al anexar el texto y sus propiedades se identificaría de la siguiente manera.
<p> Con este código podrás centrar una imagen con texto en HTML. <img src=»tecnohowto.png» alt=»Descripción del ejemplo de imagen» align=”middle”/> A través del texto de ejemplo. </p>
Centrar la imagen con código Align en hmtl
Aunque la justificación de la imagen con el atributo align en hltm no es lo más recomendado por cuestiones de estética y comodidad ya que puede ser manejado fácilmente por CSS, esta sigue siendo la manera más ágil de realizarlo.
Lo primero que necesitarás es anexar el código o atributo <img> dentro de los atributos <p> o <div>
<div align=»center»><img src=»tecnohowto.png»></div>
De esta manera, el atributo align corresponderá a situar a la izquierda o a la derecha la imagen y rellenar el resto con el texto de forma que este se vea envuelto del texto y brinde un estilo al segmento.
Tal como en el ejemplo, deberás aplicar los términos de “right” o “left” para alinear la imagen con respecto al texto.
<p><img src=»tecnohowto.png» align=»right»>De esta forma el texto rodea a la imagen establecida en el sector derecho y genera un nuevo diseño tanto a la imagen como al apartado como tal. Siendo un ejemplo bastante básico, pero fácil de implementar.</p>
<p><img src=»tecnohowto.png» align=»left»>De esta forma el texto rodea a la imagen establecida en el sector izquierdo y genera un nuevo diseño tanto a la imagen como al apartado como tal. Siendo un ejemplo bastante básico, pero fácil de implementar.</p>
Centrar una imagen con CSS
Sabiendo que el CSS parte del lenguaje establecido en HTML, es necesario que anexes la imagen bajo su identificación.
<img class=»centrar» src=»tecnohowto.png» alt=»Ejemplo de Tecnohowto»>
Una vez identificada la imagen con la clase “Centrar”, solo basta con insertar el código CSS que corresponde a la característica de centrar la imagen dentro de la página web. En la cual, expresamos que el margen se mantiene una distancia de 10 píxeles y se ajuste automáticamente a la dimensión de la pantalla que se muestra.
.centrar{
margin:10px auto;
display:block;
}
Otra manera de implementar CSS para alinear una imagen es con el siguiente código. En el cual únicamente manipulas las dimensiones de los márgenes, tanto izquierdo como el derecho, a ajustarse según la pantalla donde se imprime y de esta forma, siempre centrar la imagen.
Identificar el bloque de img
Dentro de las opciones anteriores podría presentarse la situación de que la imagen sea alternada por textos y no se cumpla el objetivo de centrarla o alinearla.
En este caso, la solución sería segmentar los bloques e identificarlos con img. De esta forma, el código a insertar es
img.centrar {
display: block;
margin-left: auto;
margin-right: auto;
}
Así, la imagen se diferencia del texto y se establece un margen automático con la intención de alinear horizontalmente la imagen con respecto al ancho de la pantalla.
Centrar imagen en Bootstrap
El código de esta librería hace muy sencillo el desarrollo de una web, en este caso, solo basta con anexar el siguiente ejemplo con la ubicación de la imagen y su texto alternativo para hacer uso de este comando.
<img class=»center-block» src=»tecnohowto.png» alt=»ejemplo de tecnohowto «>
Y así podrás centrar una imagen con solo unos códigos de Html y Css y disfrutar de las ventajas de un diseño ligero y efectivo.