Center CSS

Discussion in 'Web Design and Development' started by Aperture, Oct 25, 2006.

  1. Aperture macrumors 68000

    Aperture

    Joined:
    Mar 19, 2006
    Location:
    PA
    #1
    Hi. Can anyone take a look at this and tell me what I need to do to center the image(s)?

    I am really frustrated & any help at all would be greatly appreciated.

    Thanks, Kevin
     
  2. clintob macrumors 6502

    clintob

    Joined:
    Feb 16, 2006
    Location:
    New York, NY
    #2
    Okay, well first off, understand that true "vertical" centering with CSS is very difficult and very hacky. Vertical centering and positioning (outside of absolute positioning) is the major glaring weakness in CSS-driven layout. There are a bunch of workarounds, but if you really need to center something vertically and horizontally, the easiest thing is just to put all your content inside a one-cell table and center it in that. It's one place where using a table is acceptable.

    Now, as for your code, get in the habit of using background colors and background images to acheive your effect much more efficiently than image cut ups. Here's a simplified example - I didn't bother with the vertical centering, but this should help you get a grasp on good CSS code. You could place a background image in the #content section (change it to read "background: #fff url(my_image.gif) top center no-repeat;") to acheive the effect of your original page layout...

    For instance... try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Sample Layout</title>
    	
        <style type="text/css" media="screen" title="">
    		html, body {
    			background: #fff;
    			margin: 0;
    			padding: 0;
    			text-align: center;
    		}
    		
    		.clear {
    			clear: both;
    		}
    		
    		#wrapper {
    			background: #fff;
    			display: block;
    			text-align: left;
    			padding: 0;
    			width: 100%;
    		}
    		
    		#header {
    			background: #fff;
    			width: 864px;
    			height: 31px;
    			margin: 0 auto;
    			padding: 0;
    		}
    		
    		#content {
    			background:#000;
    			display: block;
    			width: 864px;
    			height: 432px;
    			margin: 0 auto;
    			padding: 0;
    		}
    		
    		#logo {
    			background: #ffcc00;
    			width: 212px;
    			height: 18px;
    			margin: 0;
    			padding: 0;
    		}
    		
    		#nav {
    			background: #000;
    			float: left;
    			margin: 300px 0 0 0;
    			padding: 0;
    			width: 100%;
    		}
    		
    		#nav li {
    			float: left;
    			height: 34px;
    			margin: 0 0 0 36px;
    			overflow: hidden;
    		}
    		
    		#nav li a {
    			display: block;
    			line-height: 34px;
    			text-indent: -5000px;
    			overflow: hidden;
    		}
    		
    			#nav_0 {
    				width: 172px;
    				background: #b80005;
    				}
    			#nav_1 {
    				width: 172px;
    				background: #b80005;
    				}
    			#nav_2 {
    				width: 172px;
    				background: #b80005;
    				}
    			#nav_3 {
    				width: 172px;
    				background: #b80005;
    				}
    				
    		#footer_wrap {
    			background: transparent;
    			width: 100%;
    			padding: 0;
    			margin: 0;
    		}
    		
    		#footer {
    			background: #99ff00;
    			width: 864px;
    			text-align: center;
    			margin: 0 auto;
    		}
    	</style>
    	
    </head>
    
    <body>
    
    	<div id="wrapper">
    	
    		<div id="header">
    			<div id="logo"><p>logo</p></div>
    		</div>
    		
    		<div id="content">
    		
    			<ul id="nav">
                  <li><a class="currentSection" href="#" id="nav_0">home</a></li>
    			  <li><a href="#" id="nav_1">about</a></li>
                  <li><a href="#" id="nav_2">photo</a></li>
                  <li><a href="#" id="nav_3">contact</a></li>
    		    </ul>
    			
    		</div>
    
    		<div class="clear"></div>
    		
    		<div id="footer_wrap">
    			<div id="footer">
    				<p>footer</p>
    			</div>
    		</div>
    
    	</div>
    
    </body>
    
    </html>
     
  3. spicyapple macrumors 68000

    spicyapple

    Joined:
    Jul 20, 2006
    #3
    Basic centering CSS

    HTML:
    body
    {
    	margin: 0; /* to avoid margins */
    	text-align: center; /* to correct the centering IE bug*/
    	background: #000000;
    	padding: 0px;
    }
    
    #global {
         position:absolute;
         left: 50%; 
         top: 50%;
         width: 400px;
         height: 300px;
         margin-top: -200px; /* half of the height */
         margin-left: -150px; /* half of the width */
         border: 1px solid #000;
         }
     
  4. clintob macrumors 6502

    clintob

    Joined:
    Feb 16, 2006
    Location:
    New York, NY
    #4
    This is one of the "hacky" fixes (that I've resorted to many times myself!) that I was referring to and it will definitely work. The only downside here is that you have to know the exact height and width of the content you're working with. It wont work for a fluid layout, or one with content that changes. For your purposes it might be fine.
     

Share This Page