Javascript function doesn't repeat itself
<p>I'm trying to verticaly align every .class on a site with the help of Javascript. So far I got this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
        function setContent() {
            var windowHeight = 67;
            if (windowHeight &gt; 0) {
                var contentElement = document.getElementById('center');
                var contentHeight = contentElement.offsetHeight;
                if (windowHeight - contentHeight &gt; 0) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                }
            }
        }
        window.onload = function() {
            setContent();
        }
    &lt;/script&gt;
</code></pre>

<p>This works but only on the first element with the ID center. Since I have 6 elements which have to change I changed the code to this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
        function setContent() {
            var windowHeight = 67;
            if (windowHeight &gt; 0) {
                var contentElement = document.getElementsByClassName('center');
                var contentHeight = contentElement.offsetHeight;
                if (windowHeight - contentHeight &gt; 0) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                }
            }
        }
        $('.center').each(function(){
            $(this).setContent();
        });
    &lt;/script&gt;
</code></pre>

<p>I changed document.getElementById('center'); to document.getElementsByClassName('center'); so it takes all the classes (and yes, I've changed it in the html as well). I've also inserted a bit of code which should repeat the function for every element with class center. Problem is, it doesn't work and I can't figure out where it goes wrong..</p>

<p>Any ideas?</p>
