Center DIV of Main Page
5 posts
Page 1 of 1
ok I'm having one of thoughs dumb moments where something is really simple you know it, but are just clueless on how to do it, yeah I'm having a dumb day today.
Anyway what I'm trying to do is align a div, just a simple div to the center of the website so in any resolution you view it in, it's directly in the center, but I can't remember how to do this, can anyone help???
Anyway what I'm trying to do is align a div, just a simple div to the center of the website so in any resolution you view it in, it's directly in the center, but I can't remember how to do this, can anyone help???
You can use <center> in html,
or you can use ID and add this in the css:
or you can use ID and add this in the css:
Code: Select all
just assign the width you want.width: 900px;
margin-left: auto;
margin-right: auto;
We shall let the revolution begin.. the revolution for freedom, freedom against censorship. We shall fight in the fields and in the streets, we shall fight in the hills; we shall never surrender
I'm not talking about just horizontally, I'm also talking about vertically as well, but anyway I figured it out.
Code: Select all
Also you don't need margin-left, and margin-right. You could just use this code below to do the same thing (width will need to be adjusted of course for best results).
position:absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
width:100px;}
Code: Select all
div.base {
margin: 0 auto;
width:235px;}
This is a very simple thing todo.
Just Paste this code in a new webpage (.htm, .html, .php) whatever then load it in your browser.
Beware! IE hates this type of stuff.
But all the other browsers have no problems with it.
Center the <div> Vertically and Horizontally.
More Advanced
Even works for IE.
Just Paste this code in a new webpage (.htm, .html, .php) whatever then load it in your browser.
Beware! IE hates this type of stuff.
But all the other browsers have no problems with it.
Center the <div> Vertically and Horizontally.
Code: Select all
I would only use the .centered class and forgot about trying to work with IE.<html>
<head>
<title> ... </title>
<style type="text/css">
/* ALL OTHER BROWSER */
.centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
background-color: red;
color: white;
}
/* SORT OF WORKS FOR IE */
.centered_IE {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
background-color: red;
color: white;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="centered">bleh</div>
</body>
</html>
More Advanced
Even works for IE.
Code: Select all
wahooo; Who's the Man!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertically and Horizontally Centering a DIV</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-size: 12px;
font-family: arial, helvetica, sans-serif;
color: #333;
}
p {
margin: 1em;
}
.comments {
background-color: #e3e3e3;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 2px;
}
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">
<p>This is a vertically and horizontally centered <div> tag. Try resizing your browser.</p>
<div class="comments">
<p><strong>Comments:</strong></p>
<p>Tested in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN4.7, NN7, and Mozilla 1.2.</span><br />
Works in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN7, and Mozilla 1.2.</span><br />
Doesn't work in: <span style="color: darkblue">NN4.7</span></p>
<p>© Copyright 2003, <a href="/">Infinity Web Design</a></p>
</div>
</div>
</body>
</html>
Nice one Scottie!
Wish you posted this earlier before I released TimeSamurai, for Chrome.
Still works like it's suppose to though, but I'm definitely bookmarking this encase I get another dumb moment again lol
Wish you posted this earlier before I released TimeSamurai, for Chrome.
Still works like it's suppose to though, but I'm definitely bookmarking this encase I get another dumb moment again lol
5 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023