www.webdeveloper.com
Results 1 to 5 of 5

Thread: imitating <div align="center"> using css

  1. #1
    Join Date
    May 2006
    Posts
    135

    imitating <div align="center"> using css

    Hi everyone I'm new to CSS and I've been having troubles getting certain layouts using this technology. I'm so used to using tables in HTML. What I can't seem to figure out is how to imitate the <div align="center"> tag in CSS. I've looked at all the CSS properties and there is nothing that allows you to align elements such as div. The closest thing that I came up with is text-align: center. But that doesn't give me the results I want. I'm surprised that there's a vertical-align property in CSS but no horizontal-align property or just a plain old align property. The layout I'm trying to achieve is to center the document in the web browser, so that if the user adjusts the size of the browser, the document will adjust automatically with the new window size. In HTML all I had to do was wrap the whole document in a div tag and set it's attribute to align="center". Can someone show me how to achieve the same results. There have been a couple of people who have tried to help me on this issue before but their advice was to use position: absolute and set the left, and right properties. But that won't automatically adjust the document if the user changes the window size. I'm sure there has to be a way using CSS right? Thanks for the help.

  2. #2
    Join Date
    Apr 2006
    Posts
    370
    Try this:

    HTML Code:
    body{text-align: center}
    
    .content{
       width: 600px;
        margin: 0 auto;
       text-align: left
    }
    Last edited by GaryS; 06-15-2006 at 09:49 AM.

  3. #3
    Join Date
    Jun 2006
    Posts
    25
    Whenever you set opposing margins to auto they will default to having the same value putting the content in the center of the screen. Depending on whether you are trying to center inside of the whole browser or inside of another div you might have to set position:relative;

  4. #4
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225
    Negative margins are useful for centering an object:
    Code:
    #fshadow {
         width: 400px;
         height: 520px;
         position: absolute;
         left: 50%;
         margin-left: -200px;
         top: 50px;
         background-color: #cdcdcd;
    }
    <div id="fshadow">
       whatever
    </div>

  5. #5
    Join Date
    May 2006
    Posts
    135
    I see. margin: auto. That was what I was missing. A million thanks everyone.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles