CSS Ajustar texto alrededor de una imagen
CSS le permite envolver texto alrededor de una imagen, que es una excelente manera de crear diseños visualmente atractivos y fáciles de leer en HTML, lo que en última instancia mejora la legibilidad del contenido. Puede configurarlo para que se ajuste alrededor del lado izquierdo o derecho de la imagen, o puede configurarlo para que se ajuste alrededor de la parte superior o inferior de la imagen.
CSS Ajustar texto alrededor de una imagen
En HTML, hay diferentes formas de envolver texto alrededor de imágenes. La forma más típica es utilizar el atributo alinear.
Puede utilizar el atributo alinear para especificar la posición de la imagen donde desea insertarla. Por ejemplo, puede usar el atributo alinear para centrar una imagen dentro de un párrafo de texto.
Con CSS, tiene el control total para ajustar el texto alrededor de una imagen en consecuencia. El texto se ajustará de forma predeterminada alrededor de una imagen para alinearse con el borde izquierdo o derecho de la imagen.
Sin embargo, puede usar la propiedad flotante de CSS para controlar cómo el texto se ajusta alrededor de una imagen.
{
float: left;
}
Si establece la propiedad flotante a la izquierda, la imagen flotará a la izquierda del texto y el texto se ajustará a la imagen. Si establece la propiedad flotante a la derecha, la imagen flotará a la derecha del texto y el texto se ajustará a la imagen.
También puede usar la propiedad clear de CSS para controlar cómo el texto se ajusta alrededor de una imagen.
Si establece la propiedad clear a la izquierda, la imagen flotará a la izquierda del texto y el texto no se ajustará a la imagen. Si establece la propiedad claro a la derecha, la imagen flotará a la derecha del texto y el texto no se ajustará a la imagen.
{
clear: left;
}
También puede usar la propiedad de desbordamiento de CSS para controlar cómo el texto se ajusta alrededor de una imagen. Si coloca la propiedad desbordamiento en oculto, la imagen flotará a la izquierda o derecha del texto y el texto no se ajustará a la imagen.
{
overflow: auto;
}
Por último, puede usar la propiedad relleno de CSS para controlar el espacio entre la imagen y el texto.
Si establece la propiedad de relleno en un valor de 0, la imagen se nivelará con el texto. Si establece la propiedad de relleno en un valor de 10px, la imagen tendrá 10px de espacio entre ella y el texto.
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
body {
margin: 20px;
text-align: center;
}
h1 {
color: green;
}
img {
float: left;
margin: 10px;
padding-bottom: 2px;
width: 250px;
}
p {
text-align: justify;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Wrap Text Around Image</h1>
<b>
The output of wrapping text around an image
</b>
<div class="square">
<div>
<img src="replaceYourImageHere.jpeg" alt="Longtail boat in Thailand" />
</div>
<p>
There are a few different ways to wrap text around images in HTML; the most typical way is to use the `align` attribute. You can utilize the align attribute to specify the image position where you want to insert it.
For instance, you can utilize the `align` attribute to center an image within a paragraph of text. With CSS, you are in full control to wrap text around an image accordingly. The text will default wrap around an image to flush
with the image's left or right edge. However, you can use the CSS `float` property to control how text wraps around an image.
</p>
</div>
</body>
</html>
Conclusión
Envolver texto alrededor de una imagen también puede ayudar a mejorar la usabilidad de su sitio web o blog. Cuando tiene mucho texto en una página, puede ser difícil leer si la imagen está en el medio del texto, pero el uso de imágenes entre el texto mejora la legibilidad y la comprensión.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn