{"id":2187,"date":"2013-01-17T20:45:45","date_gmt":"2013-01-17T20:45:45","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/01\/17\/align-float-images-css\/"},"modified":"2025-06-12T16:49:16","modified_gmt":"2025-06-12T20:49:16","slug":"align-float-images-css","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/align-float-images-css\/","title":{"rendered":"How to Align and Float Images with CSS"},"content":{"rendered":"
\"How<\/figure>\n\n\n\n

The formatting of Images and text is done using CSS. They can be aligned<\/strong> and floated<\/strong> 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.<\/p>\n\n\n\n

Aligned images<\/strong> 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.<\/p>\n\n\n\n

A floated image<\/strong> 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.<\/p>\n\n\n\n

Left, Center, and Right Align<\/h2>\n\n\n\n

Images can be aligned left, right, and center using the div tag and an inline CSS style. Text DOES NOT wrap<\/strong> around images that are simply aligned. The following explains how to align your images left, right, and center using CSS.<\/p>\n\n\n\n

Left Align<\/h3>\n\n\n\n

The line of code below is for aligning an image to the left.<\/p>\n\n\n\n