PDA

View Full Version : Exactly centered div?


Moh
20-04-2008, 02:23 PM
Is there a way to make a div exactly in the middle? Possibly using JavaScript?
Decode
20-04-2008, 02:25 PM
<style type="text/css">
.Name
{width: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>
<div class="Name">Hi!</div>


That should work :)
Moh
20-04-2008, 02:43 PM
<style type="text/css">
.Name
{width: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>
<div class="Name">Hi!</div>
That should work :)
Humm, I need it centered x & y :(
On msn some one told me to use moveDialogToCenter, but I can't find the source.
Source
20-04-2008, 02:48 PM
Here this should work, sorry if it doesn't!



<!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" lang="en" xml:lang="en">
<head>
<title>Exactly Centred Div</title>

<style type="text/css">

html {display:table; height:100%; width:100%; margin: 0px; padding: 0px; }

body { display:table-cell; text-align:center; vertical-align:middle; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; color: #333333; }

.centerdiv { position: fixed; width: 400px; height: 200px; margin-left: -200px; margin-top: -100px; top: 50%; left: 50%; background-color: #cccccc; }


</style>
</head>

<body>

<div class="centerdiv">
YOUR TEXT OR OBJECT CAN GO HERE, BUT AN OBJECT CAN'T BE LARGER THAN THE FIXED SIZE. SEEMS TO WORK CROSS BROWSER.
</div>

</body>
</html>
Remotive
20-04-2008, 02:49 PM
Do you mean the content inside the div exactly in the middle of the div or the divin the middle of the page?
Source
20-04-2008, 02:50 PM
the code I posted always puts the DIV in the centre of the page.
Decode
20-04-2008, 02:52 PM
You should just use the <center> tag lool, and put style="text-align: left;" in the div tag.
Source
20-04-2008, 03:01 PM
Yes, but if you re-read the post he states he wanted not only aligned centrally in horizontal terms, but also verticle.
Moh
20-04-2008, 03:21 PM
Here this should work, sorry if it doesn't!



<!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" lang="en" xml:lang="en">
<head>
<title>Exactly Centred Div</title>

<style type="text/css">

html {display:table; height:100%; width:100%; margin: 0px; padding: 0px; }

body { display:table-cell; text-align:center; vertical-align:middle; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; color: #333333; }

.centerdiv { position: fixed; width: 400px; height: 200px; margin-left: -200px; margin-top: -100px; top: 50%; left: 50%; background-color: #cccccc; }


</style>
</head>

<body>

<div class="centerdiv">
YOUR TEXT OR OBJECT CAN GO HERE, BUT AN OBJECT CAN'T BE LARGER THAN THE FIXED SIZE. SEEMS TO WORK CROSS BROWSER.
</div>

</body>
</html>

That code works, but I need it centered screen, not centered page.
You can see here (http://habbcrazy.net/index_ad.php).
Decode
20-04-2008, 03:36 PM
make a table

<table>
<tr><td width="100%" height="100%">
<center>

your content here

</center>
</td>
</tr>

That will work
Source
20-04-2008, 03:43 PM
PM me with your msn and I will happily re-write the code for it to work.

EDIT: This is because you will need to give me the sizes etc...
kreechin
20-04-2008, 10:24 PM
<style>
.centered {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}
</style>

That should work, hope it helps :)
Jonathans
22-04-2008, 07:27 PM
All those are long.

If its within your html then

<div align="center">

Or within your css.


#div }
align: center;
}
Jme
23-04-2008, 02:56 PM
<style>
#wrapper
{
margin:auto;
}
</style>
<div id="wrapper">
<div>Centered</div>
</div>
wewt
23-04-2008, 09:23 PM
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Want to hide these adverts? Register an account for free!