Is there a way to make a div exactly in the middle? Possibly using JavaScript?
Is there a way to make a div exactly in the middle? Possibly using JavaScript?
That should workHTML Code:<style type="text/css"> .Name {width: 400px; margin-left: auto; margin-right: auto; text-align: left; } </style> <div class="Name">Hi!</div>
Lets set the stage on fire, and hollywood will be jealous.
Humm, I need it centered x & y
On msn some one told me to use moveDialogToCenter, but I can't find the source.
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>
Last edited by Source; 20-04-2008 at 02:51 PM.
Do you mean the content inside the div exactly in the middle of the div or the divin the middle of the page?
Forever on the dance floor.
You should just use the <center> tag lool, and put style="text-align: left;" in the div tag.
Lets set the stage on fire, and hollywood will be jealous.
Yes, but if you re-read the post he states he wanted not only aligned centrally in horizontal terms, but also verticle.
That code works, but I need it centered screen, not centered page.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>
You can see here.
make a table
<table>
<tr><td width="100%" height="100%">
<center>
your content here
</center>
</td>
</tr>
That will work
Lets set the stage on fire, and hollywood will be jealous.
Want to hide these adverts? Register an account for free!