Text-align vs align attr

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Text-align vs align attr

Post 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>
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post by Buddha443556 »

To center the DIV set the left right margins to auto.

More details here: http://www.bluerobot.com/web/css/center1.html
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Why does it only work in the bluerobot website?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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>
Post Reply