Element Alignment

Placement of items on the page is essential to web page layout. There are many ways to affect the layout of elements in a web page. The best method is to use CSS to style layout.

Align Text Paragraphs       – The default alignment of text in a paragraph is to the left side of the page, but you can also align paragraphs to the right and center of the parent element by using the float property. Any other elements inside that parent element will flow around the floated element.

<p style=”float: right;”>

Align the Paragraphs from both ends– To display the text aligned to both the right and left sides of the window, use the text-align property to justify the text from both sides.

<p style=”text-align: justify;”>

Alignment to the right side or the left (the default), can also be done using the text-align property.

<p style=”text-align: right;”>

Aligning Images – The float property on an image tag <img> defines the placement of images on the page and how the text will wrap around it as

<img src=”image.gif” alt=”image” style=”float: left; width:10px; height:50px; border:0;” />

Text following the above image tag will flow around the image to the right as the image displays to the left of the screen

Aligning Many Elements– Either apply a style property in every element or surround the elements with the <div></div> tag and the style property (float or text-align) on the div tag and everything in that division will be aligned but, alignments added to paragraphs or images within the division will override the <div> tag alignment.

Back to Tutorial