This tutorial covers the very basics of aligning images using CSS.
In this tutorial:
Required knowledge:
The <img> tag
The <img> tag is covered extensively in the horizontal alignment and vertical alignment are covered in that tutorial, so we will use that as our starting point.
align in HTML
HTML’s align="right" attribute-value pair applied to the <img> tag:
<img src="https://i1.wp.com/www.cape-hike.co.za/wp-content/uploads/2013/04/cape-hike-protea.png" width="73" height="73" alt="The Cape-hike logo which is a King Protea." align="right" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
The code above results in:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
float with CSS
The same HTML snippet minus the align attribute:
<img src="https://i1.wp.com/www.cape-hike.co.za/wp-content/uploads/2013/04/cape-hike-protea.png" width="73" height="73" alt="The Cape-hike logo which is a King Protea." /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
Applying float to an image using CSS to achieve the same result:
img {
float: right;
}
The code above results in:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.