Centering a style no matter how wide a browser window is 1

bac2u · Jun 7, 2004

Hi,

I'm trying to set up a CSS with a position that is in the center of the page no matter how large the browser window is. I know how to set a banner that goes across the entire page no matter how wide the browser window is, but in this case I don't want the text and graphics inside the CSS to go from 0 left margin to 0 right margin. I want it to be a certain width and length in the center of the page but to expand or contract to the exact center of the page no matter what the browser window size is. Is this possible?? Can you help??!!

Thanks,

Barb C.

ArkM · Jun 7, 2004

Try using a sample from the CSS 1 definition:
[code}
Example:

DIV.center { text-align: center }

Since 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered.
...
[/code]
Now
...

Code:

	<style>
	DIV.center { text-align:center; }
	</style>
</head>

<body>
<div class=center>
<h1>Centered</h1>
<img src="spin.gif" width="29" height="29" alt="" border="0">
<table>
<tr>
       <td>1.1</td>
       <td>1.2</td>
</tr>
<tr>
       <td>2.1</td>
       <td>2.2</td>
</tr>
</table>
</div>

all elements in div are centered...

ChrisHunt · Jun 8, 2004

I suspect you really want to position an element in the (horizontal) middle of the screen, but for text in that element to be left-aligned. This should work:

Code:

div.centred {
   width: 300px; /* or whatever */
   margin-left: auto;
   margin-right: auto;
}

Unfortunately, it doesn't work in IE, so you have to be a bit devious. If you can use a percentage for the width, it's easy:

Code:

div.centred {
   width: 80%; /* or whatever */
   margin-left: 10%;
   margin-right: 10%;
}

Otherwise you'll probably have to do something like this:

Code:

div.outer {
   text-align: center;
}

div.inner {
   width: 300px; /* or whatever */
   margin-left: auto;
   margin-right: auto;
}

and wrap your centred element with a second div:

Code:

<div class="outer">
  <div class="inner">
     Your content here!
  </div>
</div>

Alternatively, you might look into Dead Edwards' "IE7" -

http://dean.edwards.name/IE7/

- which fixes a lot of IE misbehaviours, though I don't know if this is one of them.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

bac2u · Jun 8, 2004

Thanks to both of you for your tips. Using the % on the width did the trick. I'm using just CSS for this web site, I'm a novice and have never used tables and don't know how to write the code, but I've saved your suggestion, ArkM, because it helps me understand what's going on underneath.

Have a great day!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Centering a style no matter how wide a browser window is 1

bac2u

MIS

ArkM

IS-IT--Management

ChrisHunt

Programmer

bac2u

MIS

Similar threads

Part and Inventory Search

Sponsor