The formatting of Images and text is done using CSS. They can be aligned and floated to allow the images to be placed in particular locations on the page. Using these options will help you create content that is easier to understand.
Aligned images do not wrap text around them. Aligning images will only position the image left, right, or center with the text following before and after the image. Aligning leaves quite a bit of white space on your site. You will see the white space when you go through the aligning section.
A floated image will let the text wrap around the image as a regular book or newspaper would. Images can also be floated, so they appear horizontally on your site. This is good for displaying images like a gallery. The following sections will explain how to float and align images using CSS.
Left, Center, and Right Align
Images can be aligned left, right, and center using the div tag and an inline CSS style. Text DOES NOT wrap around images that are simply aligned. The following explains how to align your images left, right, and center using CSS.
Left Align
The line of code below is for aligning an image to the left.
<div style="text-align: left;"><img src="image/your-image.png" width="100" /></div>
Center Align
The following line of code is for centering an image.
<div style="text-align: center;"><img src="image/your-image.png" width="100" /></div>
Right Align
The following line of code contains the CSS attribute for aligning right.
<div style="text-align: right;"><img src="image/your-image.png" width="100" /></div>
Floating Images Using CSS
Floating images allow images to align horizontally with each other and allow text to wrap around the image. The following will explain horizontally aligning images and floating images around the text.
Floating Images Left to Wrap Text
This code aligns an image to the left of a text block. Note that the margin in the code determines the space around the image. The code defines the space in clockwise pixels: top, right, bottom, and left.
You can see that the code below has a margin of 0px (top), 15px (right), 15px (bottom), and 0 px (left). The code allows for 15 pixels of space to the top and right of the image.
<img style="float: left; margin: 0px 15px 15px 0px;" src="image/your-image.png" width="100" />
Important! Floated images will overlap each other if the float is not cleared. Ensure you place a clear float code after each section where your image floats. Below is the code to clear your floats.
<br style="clear:both;" />
Floating Images Right to Wrap Text
The following code floats an image to the right. Notice that the margin differs from the code used when an image is floating to the left.
<img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image.png" width="100" />
Floating Images Left Horizontally
This will use the same code as before (see below). The images are placed one after another to get them to float horizontally. Floating images in line with each other is another way to display your images as a gallery.
<img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image-1.png" width="100" />
<img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image-2.png" width="100" />
<img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image-3.png" width="100" />
<img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image-4.png" width="100" />
This concludes how to align and float images with CSS. Use these options to help create more informative and creative content by blending your text and images on your web pages.
Join our community to receive specialized help with HTML and design, special hosting offers, and more! The next tutorial will show you how to make a simple CSS Drop Down Menu. We also have a helpful article on External, Internal, and Inline CSS styles.
Looking for more help with CSS? Check out our introduction to CSS guide!
