SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I center a div class container horizontally?

    I searched the web for solutions but none centered this horizontally on the page. I tried
    margin-right: auto; and margin-left: auto; and tried margin 0 auto:
    What's the solutions?
    Thanks.

    Code:
    	.container10
    	{
    	border:1px solid #000000;
    	background: #00FF00;
    	padding:0px 0px 0px 0px;
    	width:980px;
    	height:264px;
    	margin:0px 0px 0px 0px;
    	}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Margin:auto is all you need on a non positioned element that has a width defined.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .container10 {
    	border:1px solid #000;
    	background:#0f0;
    	padding:0;
    	width:980px;
    	height:264px;
    	margin:0 auto;
    }
    </style>
    </head>
    
    <body>
    <div class="container10"></div>
    </body>
    </html>
    You must use a valid doctype or IE reverts to quirks mode and won't center.


Bookmarks

Posting Permissions

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