API tools faq
paste
Advertisement
Phr0zen_Penguin

Center Your Entire Web Site

Phr0zen_Penguin
Aug 29th, 2014
333
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--------------------------------------------------------------------------------------------------
  4.  --------------------------------------------------------------------------------------------------
  5.  [site_center.html]
  6.     A foolproof up-to-date way of centering your entire web site using nothing but a 'div' and CSS.
  7.  
  8.         (c) Damion 'Phr0z3n.dev' Tapper, 2014.
  9.         Email: Phr0z3n.Dev@Gmail.com
  10.  --------------------------------------------------------------------------------------------------
  11.  --------------------------------------------------------------------------------------------------->
  12.  
  13. <html>
  14.     <head>
  15.  
  16.         <title>
  17.             Phr0z3n.Dev's Centered Web Site
  18.         </title>
  19.  
  20.         <style type="text/CSS">
  21.             body{
  22.                 font-family: helvetica;
  23.                 font-size: 11pt;
  24.             }
  25.             h1{
  26.                 margin: 0px;
  27.  
  28.                 font-family: verdana;
  29.                 font-size: 16pt;
  30.                 text-align: center;
  31.             }
  32.  
  33.             /***************************************************************************************
  34.              * Here we just dig into the matter without hesitation.  Pretty much every attribute set
  35.              * here is relevant to the process except for 'border' and 'border-radius'.  The former
  36.              * gives us an idea of the site's outline, and evidence that it is truly centered, when
  37.              * we are done.  The latter almost always make sense.
  38.              ****************************************************************************************/
  39.             #mainDiv{
  40.  
  41.                 /**
  42.                  * Set the overall web site dimensions.  This will vary depending on your site's
  43.                  * intended usage.
  44.                  **/
  45.                 width: 800px;
  46.                 height: 600px;
  47.  
  48.                 /**
  49.                  * Without absolute positioning, the site could not be centered vertically using this
  50.                  * method.
  51.                  **/
  52.                 position: absolute;
  53.  
  54.                 border: 2px solid rgb(0, 128, 0);
  55.                 border-radius: 20px;
  56.  
  57.                 /**
  58.                  * Horizontal Centering:
  59.                  * Notice how the margin attributes are set to a fraction of the overall relative
  60.                  * dimensions.
  61.                  **/
  62.                 left: 50%;
  63.                 margin-left: -400px;
  64.  
  65.                 /**
  66.                  * Vertical Centering:
  67.                  **/
  68.                 top: 50%;
  69.                 margin-top: -300px;
  70.  
  71.                 /**
  72.                  * NOTE: even without deprecated alignment elements/attributes, it is quite evident
  73.                  * that this is more than just an interesting method to get the job done.
  74.                  **/
  75.             }
  76.  
  77.         </style>
  78.  
  79.     </head>
  80.     <body>
  81.  
  82.         <div id="mainDiv">
  83.         <p>
  84.         Voila, your site is officially centered.&nbsp; (<em>But not your text</em>)&nbsp; Now get on with the coding.&nbsp; ;)
  85.         </p>
  86.         </div>
  87.  
  88.     </body>
  89. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!