Introduction to image display styles

Sample Image Placement

You can easily create a page using the style seen on this page.

Align Image to the Left

This is achieved by specifying class="left" in the <img> tag, which aligns the image to the left. The parent <p> tag has class="clearfix" applied, preventing floating elements (such as the left-aligned image) from affecting the parent element. Clearfix is typically implemented using an empty element added after the floating elements or using another method in CSS to clear floats.

Align Image to the Center

This is achieved by specifying class="center" in the <img> tag, which aligns the image to the center. The parent <p> tag has class="clearfix" applied, preventing floating elements (such as the center-aligned image) from affecting the parent element. Clearfix is typically implemented using an empty element added after the floating elements or using another method in CSS to clear floats.

Align Image to the Right

This is achieved by specifying class="right" in the <img> tag, which aligns the image to the right. The parent <p> tag has class="clearfix" applied, preventing floating elements (such as the right-aligned image) from affecting the parent element. Clearfix is typically implemented using an empty element added after the floating elements or using another method in CSS to clear floats.

See the Pen Align Image to the Left by 5oji (@udagawa) on CodePen.