PDA

Click to See Complete Forum and Search --> : <div align="center"> not valid?

madddidley
08-20-2004, 12:27 AM
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.









www.madddidley.com (server down) | www.indesignfx.com
LJK
08-20-2004, 12:34 AM
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
madddidley
08-20-2004, 12:44 AM
I tried that. It didn't work in IE.
MstrBob
08-20-2004, 12:51 AM
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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
Paul Jr
08-20-2004, 12:53 AM
IE doesn't support margin: auto; — what a surprise. :rolleyes:

To get this to work in IE, you have to apply text-align: center; to the parent element of the element you are trying to center.


<div id="parent">
<div id="center">This is centered!</div>
</div>


<style type="text/css">
#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 text-align: center; is applied to the BODY, and the margin: 0 auto 0 auto; ect. is applied to a wrapper DIV, which houses the rest of the code.
MstrBob
08-20-2004, 01:12 AM
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.
Paul Jr
08-20-2004, 01:22 AM
Whoa! You're right! :eek: Wow... don't I feel stupid... Oh, oh, wait, you're right. The text-align: center; is an IE 5.x (or 5.5?) fix, I believe.
Booooze
08-20-2004, 01:49 AM
Internet Explorer, in quirks mode, well, screws up a lot of things.

doesnt have to be in quirks mode to screw it all up:p:rolleyes: to it, it's all natural:p
pawky
08-20-2004, 01:57 AM
Originally posted by MstrBob
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.

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