Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Center CSS
- Thread starter Aperture
- Start date
- Sort by reaction score
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:
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>
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;
}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.spicyapple said: