/    Sign up×
Community /Pin to ProfileBookmark

<div align="center"> not valid?

In xhtml <div align=”center”> isn’t valid. Why? and how can you center something with css. All I know of is text-align and as you probably know that centers text.

[url]www.madddidley.com[/url] (server down) | [url]www.indesignfx.com[/url]

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@LJKAug 20.2004 — Hi -

Yup. Align is a 'deprecated' attribute in xhtml. Text-align actually does work in IE for non-text elements [oddly enough ;-)], but when using css try -

div#whatever{

margin:0 auto 0 auto;}

So that the left and right margins are automatically centered - depending on the parent/prior tag styles, etc.

Hope this helps,

El
Copy linkTweet thisAlerts:
@madddidleyauthorAug 20.2004 — I tried that. It didn't work in IE.
Copy linkTweet thisAlerts:
@MstrBobAug 20.2004 — Perhaps a sample? :rolleyes: Internet Explorer, in quirks mode, well, screws up a lot of things. the align attribute is invalid, because it's using HTML to style, when that is not the purpose of HTML. There are two methods, as stated, for centering objects in CSS. text-align:center; will center all inline elements (such as text, images, and <span></span>) and margin:auto; will center all block elments (like <p></p> and <div></div>) So you can always do:

<div style="margin:auto;">

Centered Div!

</div>

If you are having issues with it in IE, make sure you have the proper DTD. IE won't even recognize the right DTD, but if it sees one, it will run CSS "properly"

:rolleyes:

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"&gt;

Copy linkTweet thisAlerts:
@Paul_JrAug 20.2004 — IE doesn't support [font=courier]margin: auto;[/font] &#8212; what a surprise. :rolleyes:

To get this to work in IE, you have to apply [font=courier]text-align: center;[/font] to the [b]parent element[/b] of the element you are trying to center.

<i>
</i>&lt;div id="parent"&gt;
&lt;div id="center"&gt;This is centered!&lt;/div&gt;
&lt;/div&gt;

<i>
</i>&lt;style type="text/css"&gt;
#parent {
text-align: center;
}
#center {
padding: 3px;
margin: 0 auto 0 auto;
width: 500px;
text-align: left;
border: 1px solid #000;
}

This is a fairly common technique used when centering an entire layout. The [font=courier]text-align: center;[/font] is applied to the BODY, and the [font=courier]margin: 0 auto 0 auto;[/font] ect. is applied to a wrapper DIV, which houses the rest of the code.
Copy linkTweet thisAlerts:
@MstrBobAug 20.2004 — IE in quirks mode doesn't support margin:auto; But for making my websites, I found that with a DTD, even IE will support it. At least, as of IE 6 for Windows ME.
Copy linkTweet thisAlerts:
@Paul_JrAug 20.2004 — Whoa! You're right! :eek: Wow... don't I feel stupid... Oh, oh, wait, you're right. The [font=courier]text-align: center;[/font] is an IE 5.x (or 5.5?) fix, I believe.
Copy linkTweet thisAlerts:
@BoooozeAug 20.2004 — 
Internet Explorer, in quirks mode, well, screws up a lot of things. [/QUOTE]


doesnt have to be in quirks mode to screw it all up:p:rolleyes: to it, it's all natural:p
Copy linkTweet thisAlerts:
@pawkyAug 20.2004 — [i]Originally posted by MstrBob [/i]

[B]IE in quirks mode doesn't support margin:auto; But for making my websites, I found that with a DTD, even IE will support it. At least, as of IE 6 for Windows ME. [/B][/QUOTE]


yea, it works for me w/ out text-align
×

Success!

Help @madddidley spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...