Alignment in CSS

Alignment in CSS

As while using MS word we use ctrl+R or ctrl+L to align text in left or right same as in HTML some time we need to align over HTML elements. So there are different techniques in CSS to align text or element horizontally.

So we discuss different CSS properties that will be used for alignment in HTML.

  • Margin
  • Float
  • Right & left
  • Text-align

CSS margin property:

This property is usually used for block elements so we use margin: auto; to align element in center same as put margin values to align in top bottom right and left.

Center aligns:

Same as above there is also margin-left and margin-right properties to change the alignment of the element.

Note: the margin: auto; only affect HTML element not the text or content inside an element.

 

CSS Float Property:

This property is usually used to align two block elements in the same line. It can be used as float: left or float: right;

Using CSS left and right and position:

The left or right and position property are used to gather to align element left or right.

Like position: absolute; left: 0px;

If we apply that style to the above example:

Sometimes we use position fixed to stick an element on some specific location.

 

Text-Align property in CSS:

The text-align property is used to align text/content. All the above property cannot effect content in HTML they are only used to align HTML elements.

Text-align: center;

The text-align work only within main HTML element. This mean if some content is written in a div and we use text-align right property here it only align text to the right most of the div, not the whole page.

Instead of all of the text-align have one more property that is text-align: justify; as in MS word if we press ctrl+J it select justify alignment.

text align: justify CSS
text align: justify CSS

To apply all these effects we create a simple sticky bottom menu bar which always be on the bottom.

Sticky menu bar using HTML CSS Live Demo

Leave a Reply

Your email address will not be published. Required fields are marked *