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



Hex:


RBG:



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

DONATE

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