-----------------------------------------All deprecated HTML TAGS will be post here with alternatives.--------------------------------------------
OLD
Code:<div align="center"> ... </div>
<h1>Header</h1>
<table> ... </table>
</div>
|
New
Code:<div style="text-align:center;">
<h1>Header</h1>
<table style="margin-right: auto; margin-left: auto;">
<tr><td>r1</td></tr>
<tr><td>r2</td></tr>
</table>
</div>
|
------------------------------------------------------------->
<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 :
Code: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
Sample usage :
1. Example usage for Blogger/WordPress users (who don't have access to style-sheet ) :
center :
Code:<div style="text-align:center">Content... </div>
|
This will result into this :
left :
Code:<div style="text-align:left">Content... </div>
|
This will result into this :
right:
Code:<div style="text-align:right">Content... </div>
|
This will result into this :
justify:
Code:<div style="text-align:justify">Content... </div>
|
This will result into this :
inherit:
Code:<div style="text-align:center"><!-- parent division -->
<div style="text-align:inherit">
Text-align:inherit
[ Division Content... ]
</div>
</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:
Code:#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}
|
NOTE : The <center> element was deprecated because it defines the presentation of its contents -- it doesn't describe its contents.
What I do is take common tasks like centering or floating and make CSS classes out of them. When I do that I can use them throughout any of the pages. I can also call as many as I want on the same element.
Code:.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}
|
Now I can use them in my HTML code to perform simple tasks.
Code:<p class="text_center">Some Text</p>
|
If you want inline elements use this method
Code:<div style="text-align: center;">
I'm centered.
</div>
|
or
Code:<div style="margin:0 auto">
<!--contents goes here-->
</div>
|
Another way will be CSS
Code:.centerclass{
margin:0 auto;
}
html
<div class="centerclass">
<!--Contents goes here-->
</div>
|
How do I horizontally center a div in a div with CSS
Code:<div id="outside" style="width:100%">
<div id="inside">Foo foo</div>
</div>
|
1581 down vote accepted
You can apply this CSS to the inside div:
Code:#inside {
width: 50%;
margin: 0 auto;
}
|
Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.
If you are targeting IE8+, it might be better to have this instead:
Code:
#inside {
display: table;
margin: 0 auto;
}
|