Databases
StackOverflow2013
Postsdbo
POCSS - Set all DIVs Centered
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS - Set all DIVs Centered
    text
    copied!<p><strong>I <em>almost</em> figured out what I need - see my answer, it's 90% complete</strong></p> <p><strong>Background</strong></p> <p>I've finally transferred my website, as per a friends suggestion, from tables holding the images for the background to CSS. </p> <p>When creating the original site (with tables), I couldn't get the page both horizontally centered and vertically. I used all the tags available, but it just wouldn't work. It was weird. </p> <p>I got hold of JS to set content to the right place on the screen dependant on the window height and width, on onLoad() and onResize(). The Javascript was as follows:</p> <pre><code>function getWindowHeight() { var windowHeight = 0; if (typeof(window.innerHeight) == 'number') { windowHeight = window.innerHeight; } else { if (document.documentElement &amp;&amp; document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else { if (document.body &amp;&amp; document.body.clientHeight) { windowHeight = document.body.clientHeight; } } } return windowHeight; } // Vertically center the #content div function setContent() { if (document.getElementById) { var windowHeight = getWindowHeight(); if (windowHeight &gt; 0) { var contentElement = document.getElementById('body'); var contentHeight = contentElement.offsetHeight; var contentWidth = contentElement.offsetWidth; if (windowHeight - contentHeight &gt; 0) { contentElement.style.position = 'relative'; contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px'; } else { contentElement.style.position = 'static'; } } } } </code></pre> <p><strong>Old to New</strong></p> <p>The original HTML uses tables to display everything. Very poor! So I've converted to CSS.</p> <p><a href="http://tasks.j7mbo.co.uk" rel="nofollow">Here is the new page.</a>.</p> <p><strong>My Question</strong></p> <p>I need to center all my divs on the page, just like it was with tables. However, using the above JS in conjunction with <code>align="center"</code> places everything far too much to the right.</p> <p>How do I center everything on screen so that when the screen is resized, it all stays in the center?</p> <p>I have looked at containers, edited the Javascript above to account for .left and more. I need that tiny bit of code tailored to what I have. Can someone lend a quick hand, I've been at this for half a day. Thanks!</p> <p>Basic code for what I want to center:</p> <pre><code>&lt;body bgcolor="#a5a5a5" onLoad="setContent();" onResize="setContent();"&gt; &lt;div id="body" align="center"&gt; &lt;!-- Horizontal alignment handled with align tag, vertical via Javascript --&gt; &lt;div id="img-01"&gt;&lt;img src="images/img_01.jpg" width="12" height="584" alt="" align="center"&gt;&lt;/div&gt; &lt;div id="img-02"&gt;&lt;img src="images/img_02.jpg" width="365" height="17" alt="" align="center"&gt;&lt;/div&gt; // ... and more images in divs, up to about 23 </code></pre> <p>How do I center all these? Just thought I'd note that originally it was a load of seperate div imgs, but I added the body div because it is referenced in the JS. When I had tables, it was just one div with all the table cells inside it, which is why it worked.</p> <p>EDIT: When I DO think I have a horizontal center working, it seems more 75% to the right instead. Confused, please can someone help? :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload