Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    I can't get my text to align centrally!

    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!

    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 ...

    Code:
    <!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

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    The most reliable and consistent method for 'dead centering' without tables is (unfortunately) still the negative margin kludge.
    e.g.
    Code:
    <!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..._ie5_hack.html
    http://centricle.com/ref/css/filters...escaped_close/
    http://premonition.co.uk/cssd/ie51-only.html
    Last edited by Bill Posters; 05-24-2005 at 12:31 PM.

  • #3
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Thanks!

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

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by mrruben5
    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?
    Try it yourself and find out.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •