Home Website Builder Logic Battle Card RPG Godot Tutorials Website Builder Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP ReactJS VR Tech Blog PHP Fiddle

Intro to HTML: Align Attribute

Quick Copy Boxes

The align attribute specifies the horizontal alignment of an element's content. Everything inside that element will align.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Align Values

Here are the possible values for the align attribute:
✶ left: Aligns element to the left.
✶ right: Aligns element to the right.
✶ center: Centers the element.
✶ justify: Each line will be equal length, like a newspaper.

Example: Align Center

<p align = 'center'> This is a centered paragraph.  The align attribute is equal to center. </p> 

<p> Paragraph Element
align = 'center' The paragraph's content will be centered.
Element's Content
</p> End Paragraph

Example: Justify

<p align = 'justify'> This is a justified paragraph.  The align attribute is equal to justify. </p> 

<p> Paragraph Element
align = 'justify' The paragraph's content will be justified.
Element's Content
</p> End Paragraph

Image Align

Img elements have an HTML align attribute. This can be used to enchance your page's appearance.

Here are the options for image align:
 ✶ left
 ✶ right
 ✶ middle
 ✶ top
 ✶ bottom

Example Image Tag

         <img src="image.gif" align="middle">

src - Image location
align - The image aligned middle.

Color Selector



This lesson's code is on GitHub:

CSS: Alignment

If you find my tutorials helpful, please consider donating to support my free web development resource.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy


Next, play around with the code below. Change the alignment of the elements to see how the output changes.