Question

With this code, I am trying to center an item depending width:

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() );

HTML

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

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

What am I missing here?

Answer 1

No; empty elements can have 0 width.

Elements that aren’t in the DOM tree will also have 0 width.