Center tag - Deprecated tag in HTML5

Center tag. Here you will get information about deprecated center tag in latest version of HTML ( HTML 5.0 ) and a tutorial about 'How to use CSS Text align: property in HTML 5.

<center> tag

This tag was used in older version of HTML to align the text and content at the center. This tag was deprecated in 'HTML 5'. You should use CSS text-align Property instead.

Usage :
1. In-Line usage : <div style="text-align:center">Content goes here....</div>
2. CSS Code : #your-div {text-align:center}
HTML Code : <div id="text-align">Content goes here....</div>

Values you can use :
'left' - Used for left alignment.
'right' - Used for right alignment.
'center' - Used for center alignment.
'justify' - Stretches the lines to make them of equal width ( increase or decrease internal space )
'inherit' - This is will use text align property of parent division

Default value: It depends on browser type/settings.

Supported Browsers :
This property is very common and almost all browsers support this CSS property.
List of some major supported browsers :
  • Internet Explorer
  • FireFox
  • Google Chrome
  • Opera
  • Safari

Sample usage :
1. Example usage for Blogger/WordPress users (who don't have access to style-sheet ) :
center :
<div style="text-align:center"> Division Content... </div>
This will result into this :

left :
<div style="text-align:left"> Division Content... </div>
This will result into this :

<div style="text-align:right"> Division Content... </div>
This will result into this :

<div style="text-align:justify"> Division Content... </div>
This will result into this :

<div style="text-align:center"><!-- parent division -->
<div style="text-align:inherit">
[ Division Content... ]
</div><!-- end of parent division -->
This will result into this :

2. If you have access to style-sheet then you can use this instead.But you have to assign unique division ID,see examples below:

#your-div-center {text-align:center}
#your-div-left {text-align:left}
#your-div-right {text-align:right}
#your-div-justify {text-align:justify}
#your-div-inherit {text-align:inherit}

Using 'text-align' property doesn't actually aligns the divisions themselves, it aligns the text content within the division.


No responses found. Be the first to comment...