Centering dynamic pagination bootstrap

Question

I'm trying to center a pagination. I found this answer that explains how to do it.

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

The problem is I'm creating this pagination dynamically. If you see this image you will noticed that the paginating is not center. Is at the right side. paging http://sc-cdn.scaleengine.net/i/6361c08e9a1d841dfa24a935be34f8c3.png

This is my code for creating it. I'm assuming it has to do with the CSS, but not sure. I have try to do the same example with static data and works. So I don't know why it doesn't work. This is a demo: http://jsbin.com/zumid/1

function createPagination(names){
        var uiPaging=document.createElement("ul");
        uiPaging.className="pagination";

        var liPaging=document.createElement("li");
        var aPaging=document.createElement("a");
        aPaging.innerHTML="«";
        aPaging.href="#"+names[0];
        liPaging.appendChild(aPaging);
        uiPaging.appendChild(liPaging);

        for(i=0;i<names.length;i++){
            var liPaging =document.createElement("li");
          if(i==0){
                liPaging.className="active";
            }
            var aPaging =document.createElement("a");
            aPaging.innerHTML=i+1;
            aPaging.href="#"+names[i];
            liPaging.appendChild(aPaging);
            uiPaging.appendChild(liPaging);
        }
        var liPaging =document.createElement("li");
        var aPaging =document.createElement("a");
        aPaging.innerHTML="&raquo;";
        aPaging.href="#"+names[names.length-1];
        liPaging.appendChild(aPaging);
        uiPaging.appendChild(liPaging);

        var centerdiv=document.createElement("div");
        centerdiv.className="text-center";
        centerdiv.appendChild(uiPaging);
        return centerdiv;

    };