Page 1 of 1

Text-align vs align attr

Posted: Tue Apr 03, 2007 7:12 pm
by JellyFish
Are they identical in behavior? Does text-align only align text elements (Apparently not, it align my image. But I'm talking about divs, spans, p, etc.)?

The reason I ask this is:

Code: Select all

...
<div id="middle">
			<div id="content">
				Content can vary in this layout! <br/>
				<br/>
				<a href="javascript: void(document.getElementById('content').innerHTML += '<br/>You added more content!')">Click here to add more content</a>
			</div>
...

Code: Select all

		#middle {
			background: url('images/map/middle.png') top center repeat-y;
			padding: 5px;
			padding-bottom: 100px;
			text-align: center;
		}
		#content {
			width: 750px;
			text-align: left;
		}
Doesn't align the div#content in the center. Doesn't act like:

Code: Select all

		<div id="middle" align="center">
			<div id="content" align="left">
				Content can vary in this layout! <br/>
				<br/>
				<a href="javascript: void(document.getElementById('content').innerHTML += '<br/>You added more content!')">Click here to add more content</a>
			</div>
		</div>

Posted: Tue Apr 03, 2007 8:44 pm
by Buddha443556
To center the DIV set the left right margins to auto.

More details here: http://www.bluerobot.com/web/css/center1.html

Posted: Sat Apr 07, 2007 2:14 pm
by JellyFish
I tested:

Code: Select all

<div style="margin-left: auto; margin-right: auto;">
<div style="border: 1px solid black; height: 100px; width: 100px;"></div>
</div>
In both IE7 and FF2, and in both there's nothing significant. Am I doing something wrong?

Posted: Mon Apr 16, 2007 6:25 pm
by JellyFish
Why does it only work in the bluerobot website?

Posted: Mon Apr 16, 2007 6:56 pm
by Luke
you need to have a div with a width, and then set its auto-margins. You are setting its parent's margins. Also, make sure you have a doctype definition.

Code: Select all

<div style="border: 1px solid black; height: 100px; width: 100px; margin: 0 auto 0 auto;"></div>