I can't get my text to align centrally!

mlse

05-24-2005, 10:22 AM

Hi.

I have a small problem (for which I have looked at the FAQ in the pinned topics!), but which is, nevertheless, driving me crackers! :eek:

What I want to do is idiotically simple - to display a piece of text slap bang in the middle of a page (so that the margins top, bottom, left and right are equal). According to my book on CSS (and I quote from the book):

"margin-top, margin-right, margin-bottom, margin-left, margin
Values: auto, <length>, <percentage>
Description: Sets the size of margins around any given element ... If 'auto' is used for two opposing sides, then the margins on these opposing sides will be equal."

Ok. So I wrote the following, simple bit of HTML to test it ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Margin Test</title>
</head>

<body>

<div style="
width:100%;
height:100%;
background:red">

<div style="
margin:auto auto auto auto;
color:white;
font-family:arial;
font-size:30">

MIDDLE

</div>

</div>

</body>
</html>

I was (perhaps naively) under the impression (given the quoted description of margin), that this would cause the word "MIDDLE" to be displayed always in the middle of the page, no matter what it's size. It is, however, displayed in the top-left corner! (i.e. the web browser seems to ignore the "margin: auto auto auto auto" bit of the inner div!).

If someone could tell me what I'm doing wrong I would much appreciate it, because as far as I can tell, I've exactly logically followed the definition of margin that I quoted!

TIA,
Mike

Bill Posters

05-24-2005, 11:27 AM

The most reliable and consistent method for 'dead centering' without tables is (unfortunately) still the negative margin kludge (http://www.wpdfd.com/editorial/thebox/deadcentre1.html).
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">

html, body {
height: 100%; /* to get page height to fill window area */
}

body {
font: 30px Arial, sans-serif;
padding: 0;
margin: 0;
background: #f00;
text-align: center;
}

p {
position: absolute;
margin: -15px auto auto -50px; /* half of p height auto auto half of box width */
left: 50%;
top: 50%;
color: #fff;
width: 100px;
height: 30px;
line-height: 30px;
vertical-align: middle;
}

</style>
</head>
<body>

<p>Middle</p>

</body>
</html>

There are some relatively minor issues with using this method with MSIE5/Mac, with the result that it won't display dead center unless the window is actually square. It is possible to use a css hack/workaround to allocate a different body height to MSIE5/Mac (e.g. 80%).

MSIE5/Mac CSS hacks:
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html
http://centricle.com/ref/css/filters/tests/escaped_close/
http://premonition.co.uk/cssd/ie51-only.html

mlse

05-24-2005, 11:32 AM

Thanks!

Please excuse me while I launch my CSS book out of the window ... :mad:

mrruben5

05-24-2005, 01:39 PM

You'll certanly have to put 100% on the body tag, and the thing you want to center using your way doesn't work in IE.

Put text-align: center on the body element, and vertical-align: middle on the div you want.

Doesn't display: inline help to get rid of the width of the div containing the text?

Would my way work?

Bill Posters

05-24-2005, 02:44 PM