The most important thing to know about image alignment is that you should always check the page layout on different sized devices. It’s best practice to use the below instructions to “clear the float” which tells the browser when content should no longer wrap around the image. As the screen gets bigger or smaller the amount of content floating will shift.
There are two ways you can align (or “float”) an image. When uploading a new image, simply follow the insert an image instructions.
To float an image that has already been added to the page: When editing a page, you can double click on an image to access the media browser options. Here you can change the display size, choose image alignment, and add alt text and a link.
Clear the Float
It’s important that you clear the float since the content will wrap differently on different sized screens.
Paragraphs and most other kinds of content are easy to clear:
While in the normal Rich Text editor mode, select the content you no longer want to float. From the Styles drop-down select “Clear Floated Elements.”
Horizontal rules and some other elements require that you manually edit the HTML:
- Click the Source button
- Find the element you want to make stop floating.
- add:
class="clear-float"
Example code:
Elements that have no closing tag like the horizontal rule:
<hr class="clear-float" />
Learn More
Some functions may require you to edit the source code. Check out the HTML page to learn about some times you must edit the code. Dig deeper with CSS Tricks, All About Floats article.
