How would I align a <div> container to the middle of a webpage?
I'm designing a website and this is the last piece I need before I can upload it. I've searched this site and many others, but I honestly can't 开发者_如何学Cfind the right solution. I'll be as specific as I can.
www.solarfields.com This is as good of an example as any. I want to align my content just like his, in the middle of the webpage. He uses Flash, however, and I'd like to keep mine to HTML and CSS. I have encompassed the entire body of my site in a tag with these attributes:
#body {
position:absolute;
top:13%;
left:25%;
width:350px;
}
It's centered on my monitor (1600x900), but I want it to appear centered on all resolutions.
The size: 525px (h) x 350px (w).
I more than one <div>.
I don't care about browser compatibility.
I don't want visible borders.
There's one table 801px wide. It has two <td>'s, 29px and 762px wide.
I'm a CSS noob, so I'm just giving random information. If you need anything else, don't hesitate to e-mail me @ mattjack66@gmail.com.
Thanks so, so much.
Horizontally and vertically centered:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body div {
position: absolute;
top: 50%;
left: 0;
right: 0;
}
body div div {
position: relative;
top: -262px;
height: 525px;
width: 350px;
margin: 0 auto 0;
background: #000;
}
</style>
</head>
<body>
<div><div>Testing</div></div>
</body>
</html>
If you set margin: 0 auto; on a div that also has a width set, it will center within it's parent container.
To be more specific, take the following css:
div#body {
width:902px; //Or whatever your content width is
margin:0 auto;
padding:0;
}
and apply that class to the outer most div in your site:
<html>
<body>
<div id"body">
...The rest of your content...
</div>
</body>
</html>
What this does is set the top and bottom margins of #body to 0, and the left and right margins to automatically distribute the empty space between them; which centers that div on the page. This applies a left / right center.
Solution: http://jsfiddle.net/magicaj/Xd7sK/5/
Centering horizontally is easy, you just need to set margin:0 auto; on the element you want centered. However getting an element to center vertically is much more difficult. There are CSS only solutions out there that mimic what tables can already do using the vertical-align:middle; CSS. I always strive to use tables only for tabular data but in this case I find tables for layouts is acceptable:
HTML:
<table class="wrapper">
<tr>
<td>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra, nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi aliquet fermentum quam ut sollicitudin.
</div>
</td>
</tr>
</table>
CSS:
html, body, .wrapper {
height:100%;
}
.wrapper {
margin: 0 auto; /* center horizontally */
}
.wrapper td {
height:100%;
vertical-alignment: middle; /* center vertically */
}
.content {
width: 350px;
background:#ccc;
}
加载中,请稍侯......
精彩评论