I am just curious as to why the <center> tag in HTML was deprecated.
The <center> was a simple way of quickly center-aligning blocks of text and images by encapsulating the container in a <center> tag, and I really cannot find any simpler way on how to do it now.
Anyone know of any simple way on how to center "stuff" (not the margin-left:auto; margin-right:auto; and width thing), something that replaces <center> ? And also, why was it deprecated?
The <center> element was deprecated because it defines the presentation of its contents ― it does not describe its contents.
One method of centering is to set the margin-left and margin-right properties of the element to auto, and then set the parent element’s text-align property to center. This guarantees that the element will be centered in all modern browsers.
HTML is all about providing structure and meaning to content, and this should be its sole function.
However, there are assorted tags that were added in the past by stupid browser developers, which violate this basic principle.
At some point, people came to their senses (partially, at least), and started (trying to) agree upon a specification for writing correct HTML, so they deprecated some of these tags.
However, the damage has already been done - too many people have learnt HTML as "put tags around stuff and stuff happens", rather than understanding the (important and useful) distinction between semantics and presentation, and those people have gone on to write books and tutorial, teaching other people the wrong way to write HTML, who themselves have done the same, and we've ended up with a right old mess.
Ideally, the center tag should never have existed, because people should have pointed out it's not 'real' HTML, and told the browser makers to go back and do it properly.
And for doing it properly... alignment is of course a presentation issue - applying layout and formatting to (structured) content - and the language to use for that is CSS.
However, yet again, stupid browser developers screwed up early CSS - and in many cases people creating web pages had to use incorrect HTML because the CSS simply didn't work.
These days, we're starting to get some useful functionality added to CSS, but there's still a lot that isn't implemented, and quite a few things that could have been implemented in far superior ways, but are now standardised so we're stuck with the old ways.
If stylesheets had been implemented by sensible people, you'd have all the controls you have in any decent office software - for aligning blocks and text, it'd work horizontally, vertically, upside-down, rotated, and so on - and it wouldn't be done in the stupid way of setting left/right margins to auto.
I'll add quickly, for completeness, the third 'level' for web pages, which deals with adding interactivity to an otherwise static page, which is of course the (mis-named) JavaScript.
Yet again, those stupid browser developers didn't know what they were doing. They picked an utterly inaccurate/invalid name (for marketing reasons), and again riddled a potentially great and powerful language with flaws, lack of functionality, and created something that was (until recently) hated by many people.
We have of course in the past few years seen a large uprising of JavaScript libraries which have helped to show some of the cool stuff JS has been capable of for years, hidden away many of the browser flaws which still exist in the browsers, and have partially helped to patch up CSS support so it's a bit more useful (still lots of things missing though).
So yeah, to summarise all that, the ultimate answer is because browser makers were stupid. :)
According to W3Schools.com,
The center element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.
The HTML 4.01 spec gives this reason for deprecating the tag:
The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center".
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.
.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.
<p class="text_center">Some Text</p> You can still use this with XHTML 1.0 Transitional and HTML 4.01 Transitional if you like. The only other way (best way, in my opinion) is with margins:
<div style="width:200px;margin:auto;"> <p>Hello World</p> </div> Your HTML should define the element, not govern its presentation.
It's intended that markup, i.e. the HTML tags, represent meaning and structure, not appearance. It was badly mixed up in early versions of HTML but the standards people are trying to clean that up now.
One problem with letting tags control appearance is that your pages don't play well with devices for the handicapped, such as screen readers. It also leads to having lots and lots of tags in your text that don't help clarify the meaning, but rather clutter it with information of a different level.
So CSS was thought up to move formatting/display to a different language, which is separate from the text and can easily be kept that way. Among other things, this allows switching stylesheets to change the appearance of a Web page without touching the other markup. And to be able to do that for lots of pages in one swell foop.
The tools CSS gives you to do this are not always elegant, I'm on your side there. For instance, there is no way to do effective vertical centering. And horizontal centering, if it's not just text amenable to text-align, is not much better.
You have the choice of doing easy, effective and muddled or clean, elegant and cumbersome. I don't understand why Web developers put up with this mess, but I guess they're happy to have at least a chance to get their stuff done.
HTML is intended for structuring data, not controlling layout. CSS is intended to control layout. You'll also find that many designers frown on using <table> for layouts for this very same reason.
For text and images you can use text-align:
<div style="text-align: center;"> I'm centered. </div> CSS has a text-align: center property, and since this is purely a visual thing, not semantic, it should be relegated to CSS, not HTML.
Food for thought: what would a text-to-speech synthesizer do with <center>?
I still use the <center> tag sometimes because nothing in CSS works as well. Examples of trying to use a <div> trick and failing:
<div style="text-align: center;">This div is centered, but it's a simple example.</div> <br /> <div style="text-align: center;"><table border="1"><tr><td><div style="text-align: center;"> didn't center correctly.</td></tr></table></div> <br /> <div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td><div style="text-align: center;margin-left:auto;margin-right:auto"> still didn't center either</td></tr></table></div> <br /> <center><table border="1"><tr><td>Actually Centered with <center> tag</td></tr></table></center><center> gets results. To use CSS instead, you sometimes have to put CSS in several places and mess with it to get it to center right. To answer your question, CSS has become a religion with believers and followers who shunned <center> <b> <i> <u> as blasphemy, unholy, and much too simple for the sake of their own job security. And if they try to take your <table> away from you, ask them what the CSS equivalent of the colspan or rowspan attribute is.
It is not the abstract or bookish truth, but the lived truth that counts.
-- Zen
IMO center tags work perfectly well for some things and have worked from the birth of HTML and will continue to work for many many years.
Sure there are other ways of centering most of them do not work as well as a center tag does. Also something to note is that when you center something inside a center tag, anything outside the center tag gets a line break before and after in most cases.
It was deprecated along with other tags such as <font> as its a styling element. It doesn't define what an element is, but changes how it looks. W3C wanted to keep HTML5 elements only defining elements and removed all styling elements, so that all the styling is done in the CSS or <style> of the page.
<style> .element { position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } </style> If you are updating old website which has center tag then the below solution may not work in many cases
the method of centering is to set the margin-left and margin-right properties of the element to auto, and then set the parent element's text-align property to center.
The below method will give you the exact equivalent for tag:
.center{ text-align: center; display: inherit; } .center > div { /* It is the fix if there are any div tag inside center tag */ margin-left: auto; margin-right: auto; }<span class="center"> Content </span>strong text
The tag is not deprecated in html standard - at least the html that most browsers accept as standard. Instead certain people who set themselves us as some kind of authority over the internet (and who are not elected nor in any other way accountable to us as any other governing body) tell us that they have decided we MUST not use certain tags because they don't like us using them.
But in the real world, browser will have to continue supporting these tags as long as there are substantial numbers of websites still around using them.
So like the wolf and the three pigs - they can huff and puff and jump up and down and yell and shout that we cannot use these tags, but in the real world - browsers follow what the users want and so they will continue to support Center for the foreseeable future.
So the only reason not to use them is if you are one of the people who are forced to submit your freedom to the dictate of these groups who think they own the internet.
center tag doesn't used anymore just use this
<div style="margin:0 auto"> <!--contents goes here--> </div> in other way
CSS
.centerclass{ margin:0 auto; } HTML
<div class="centerclass"> <!--Contents goes here--> </div>