How to align text in a "mobile" menu using the "select" tag

Question

I have a website (structuraonline.com.br) Responsive and when I access the menu on a PC simulating a mobile device the text is aligned to the center but when accessing using a mobile device itself the text is aligned to the left.

I have the following code on my website:

index.html:

        <nav>
            <ul class="sf-menu">
                <li><a href="#lk1">A gente!</a>
                    <ul>
                        <li><a href="#">Como foi?</a></li>
                        <li><a href="#">O que falam?</a>
                            <ul>
                                <li><a href="#">Dos projetos</a></li>
                                <li><a href="#">Da EstruturaOnline</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#lk2">WWW o qu&ecirc;?</a></li>
                <li><a href="#lk3">Voc&ecirc;s</a></li>
                <li><a href="#lk4">Fizemos</a></li>
                <li><a href="#lk5">Fazemos</a></li>
                <li><a href="#lk6">Fale</a></li>
            </ul>
        </nav>

CSS:

    .select-menu{
        background: #292929;
        background: url(../images/all/select_165x60.png) no-repeat scroll 100% center;
        background-position: 100% center;
        border: 0px !important;
        color: #EEEEEE;
        font: 900 13px "Architects Daughter";
        height: 60px;
        text-align: center !important;
        text-overflow: "";
        width: 100%;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

jQuery:

(function(a){a.fn.mobileMenu=function(d){var c={defaultText:"Menu",className:"select-menu",subMenuClass:"sub-menu",subMenuDash:"&ndash;"},b=a.extend(c,d),e=a(this);this.each(function(){var g=a(this),f;g.find("ul").addClass(b.subMenuClass);var f=a("<select />",{"class":b.className+" "+e.get(0).className}).insertAfter(g);a("<option />",{value:"#",text:b.defaultText}).appendTo(f);g.find("a").each(function(){var h=a(this),j=" "+h.text(),l=h.parents("."+b.subMenuClass),i=l.length,k;if(h.parents("ul").hasClass(b.subMenuClass)){k=Array(i+1).join(b.subMenuDash);j=k+j}a("<option />",{value:this.href,html:j,selected:(this.href==window.location.href)}).appendTo(f)});f.change(function(){var h=a(this).val();if(h!=="#"){window.location.href=a(this).val()}});a(".select-menu").show()});return this}})(jQuery);$(document).ready(function(){$(".sf-menu").mobileMenu()});

Answer 1

For central alignment I usually use text-align:

text-align:center;

For more information on text-align:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Answer 2

when you align the sf-menu as the center, it will receive by default the center. for sub-items try to be more precise as for example to align the text of the items li and ul try to use:

.sf-menu  li, sf-menu li ul li{
    text-align:center;
}