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

HTML Code:

<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

Originally Posted by Tom743

HTML Code:

<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!

Code:

<!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

Originally Posted by GasFMatt

Here this should work, sorry if it doesn't!

Code:

<!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.

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

Thread: Exactly centered div?

Thread Tools

Exactly centered div?

Posting Permissions