Member Avatar for wpcoe

I'm trying to define a block smaller than the full width of the screen and then have that block centered horizontally. I can get it to work with IE7, but not with Opera9 or Firefox2, which leads me to believe there is something wrong with my approach, even though the HTML and CSS validates.

Here's the page: http://www.wpcoe.com/index2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<STYLE type="text/css">
.block
{	width: 200px;
	background-color:#ff0;}
</style></head>
<body>
	<div style=text-align:center>
		<div class=block>text</div>
	</div>
</BODY></html>

How can I get that yellow container centered horizontally on the page, using valid HTML & CSS (not using a table)?

  • 2 Contributors
  • 2 Replies
  • 102 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by wpcoe
Member Avatar for stymiee

<div "style=margin: auto">

Member Avatar for wpcoe

Thanks for the "reminder," stymiee.

Of course, I have used that very tag several times, but for some reason faced a mental block this time.

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.