How to Make Text Wrap in HTML
Wrapping text around images on your webpages makes them stand out more and saves space on your page. You may wrap text around your images by using the "align" attribute for "img" tags in HTML. This attribute defines the vertical and horizontal alignment of the images on your pages and all major browsers support it. You may wrap other elements around your images too.
Other People Are Reading
Instructions
-
-
1
Open your HTML file. Place your cursor at the spot in your code where you want to enter the image and have text wrap around it.
-
2
Enter the following line:
<img src="image.jpg" alt="This is my picture" align="left" />
Enter the proper information for the "src" and "alt" attributes. By using "left" in the "align" attribute, the image on your page will fit into the top-left corner of a block of text. Other options you have for this attribute include "right," "middle," "top" and "bottom."
-
-
3
Save your HTML file and upload it to your web server.
-
1
Tips & Warnings
You may also use a cascading style sheet to wrap text around your images. You use the "float" attribute in the "img" tag to set the alignment. For example, typing "img {float: left;}" into a CSS file and including it in your HTML page will position your image in the top-left corner of a text block. Using a style sheet also allows you to set the "padding" and "margin" attributes to create or remove space between text and images.
