How to Wrap Text Around an Image in CSS
CSS allows you to wrap text around an image, which is a great way to create visually appealing and easy-to-read layouts in HTML, ultimately improving the content’s readability. You can set it to wrap around the image’s left or right side, or you can set it to wrap around the image’s top or bottom.
CSS Wrap Text Around an Image
In HTML, there are different ways to wrap text around images. 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 use the align attribute to center an image within a paragraph of text.
With CSS, you are in complete 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.
{
float: left;
}
If you set the float property to the left, the image will float to the left of the text, and the text will wrap around the image. If you set the float property to the right, the image will float to the right of the text, and the text will wrap around the image.
You can also use the CSS clear property to control how text wraps around an image.
If you set the clear property to the left, the image will float to the left of the text, and the text will not wrap around the image. If you set the clear property to the right, the image will float to the right of the text, and the text will not wrap around the image.
{
clear: left;
}
You can also use the CSS overflow property to control how text wraps around an image. If you put the overflow property to hidden, the image will float to the left or right of the text, and the text will not wrap around the image.
{
overflow: auto;
}
Lastly, you can use the CSS padding property to control the space between the image and the text.
If you set the padding property to a value of 0, the image will be flush with the text. If you set the padding property to a value of 10px, the image will have 10px of space between it and the text.
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Example Code:
<!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>
Conclusion
Wrapping text around an image can also help to improve the usability of your website or blog. When you have a lot of text on a page, it can be challenging to read if the image is in the middle of the text, but using images in between text improves readability and understandability.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn