jQuery height returns 0 after .wrapInner()
<p><strong>jQuery</strong></p>

<pre><code>$(".tile .hovertile").wrapInner("&lt;div class='centerText' /&gt;");

$.each($('.centerText'), function() {
    var height = $(this).outerHeight();
    console.log(height);
    $(".centerText").css({
        'top':'50%',
        'position':'relative',
        'float':'left',
        'margin-top':'-'+height+'px'
    });
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.hovertile {
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 999;
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="hovertile"&gt;

&lt;h1&gt;Test Item&lt;/h1&gt;
&lt;h2&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal&lt;/h2&gt;

&lt;/div&gt;
</code></pre>

<p>Using the above code creates 9 .centerText divs. but then each div has a different height and using the code above I'm trying to get the height. but the heights return as 0 in my console.log</p>

<p>Am I doing something wrong here as my goal is to return the height of each .centerText div</p>
