Why does `$(item).width()` return `0` even though elements exist?
<p>With this code, I am trying to center an item depending width:</p>

<pre><code>var name_ = 'Random name';
$('.arrow .text').text(name_);              
$('.arrow .text').css({'marginLeft':'-'+$('.arrow .text').width()/2+'px'});
console.log($('.arrow .text').length +' '+ $('.arrow .text').width() );
</code></pre>

<p>HTML</p>

<pre><code>&lt;div style="float:left;"&gt;
        &lt;div class="map"&gt;
            &lt;div class="arrow"&gt;
                &lt;img src="http://www.discoverdartmouth.com/images/map.point.png" /&gt;
                &lt;div class="text"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;img src="http://www.freepik.es/foto-gratis/mapa-del-mundo_17-903095345.jpg" id="img1" /&gt;
            &lt;br/&gt;
            &lt;br/&gt;
            &lt;span class="spain mPointer"&gt;Spain&lt;/span&gt; &lt;span class="australia mPointer"&gt;Australia&lt;/span&gt;
        &lt;/div&gt;                      
    &lt;/div&gt;
</code></pre>

<p>The line setting margin is not working and the console log is outputting <code>"1 0"</code>, so the item exists but has no width.</p>

<p>What am I missing here?</p>
