What is the difference between <div align="center"> and <div style="text-align:center"> aside from the obvious difference that the latter is CSS?

Recommended Answers

All 9 Replies

well, I've experimented with it a little before and validated it, aligning a div is not valid strict xhtml 1.0 anyways heh :). Other than that I don't know, I know I had different results when I used the div align but none that would make sense. E.g. I set the text-align in my stylesheet to right, this worked but I set the div align to bottom, nothing happened with the text but an image I had in the same div was aligned to the top :). Other than that I'm not sure, I think that text-align only applies to text.

once again, my opinion is much ado about nothing.

Well, in that example there is no difference, it's just part of a push away from using html attributes for style and towards css.

IF I understand right the current movement is towards having the HTML (to be replaced by XML) describing only the actual content. Then how it is represented on the screen would be described in the css. This way if you only need one data file when using the same content in different ways ex: display on a computer monitor/cell phone/pda/import it into a database, etc....

Of course this only applies when you use an external stylesheet, not when you have the style embedded right in to the tag. I suspect this will one day be depricated as well and is only allowable now to make it easier for people to transition from the old way to the new.

I don't think align="" is valid XHTML 1.0 coding. style="text-align: " is, however.

text-align CSS property applies only to the content and not the container. float property helps align the container but has no 'center' attribute. Many have suggested work around methods, which do not work uniformly in all browsers. Perhaps a combination attributes relating to margin, position, and container width could provide a way out. Will appreciate suggestions that address this issue

setting a divs margin-left and margin-right to auto is the correct syntax to make a float center to its predecessors if you set its width; the same will work for top and bottom centering with the height set.

align= is deprecated.

And the W3C clowns gave us no good way to center images in nondeprecated ways. They are thinking book and newspaper layout, where images are never centered.

So I do this:

<style type="text/css">
.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: none; border: none; padding: none;}
img {padding: 12px;}
body {padding: 5%;}

Then for the image itself:

<div class="bxfix cenx">
 <img src="mine.jpg" alt="my mine" class="ceni" />

Just make a simple class
<style type="text/css">
#Header{width:600px; background-color:#fff; margin:0 auto; }

After that just put id="header" in your div.


<div align="center">

align the div to the center position

<div style="text-align:center">

align the content of the div to center position.

Both would perform the same task. When using <div align="center">...</div>, you are fulfilling your objective by using HTML only but in case of <div style="text-align:center">..</div> you are mainly relying on CSS to make the content center aligned. Other than that, there is no difference between the two, I think

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.