COMO CENTRALIZAR OS BOTÕES DENTRO DE UMA DIV

Question

BOA TARDE GALERA.

ESTOU COM UM PROBLEMA, TENHO UMA DIV AONDE ESTÃO OS BOTÕES QUE EU PRECISO CENTRALIZAR, MAS NÃO CONSIGO, SE USAR FLOAT:RIGHT NA DIV "NVAR" OS BOTÕES VÃO PARA DIREITA, SE FOR PARA ESQUERDA TAMBÉM, MAS NÃO CONSIGO CENTRALIZAR.

MEU CODIGO CSS E O QUE FIZ EM HTML 

/ASP.NET MVC

@{
    ViewBag.Title = "Colux Service";
}

<link href="Site.css" type="text/css" media="all" rel=" stylesheet" /> 
<style id="style">
    body {
        background-color:#004b0a;
    }
</style>
<div class="botoes">
    <div class="centralizar">
        <span style="font-size:70px;"><b class="cinza">colux service</b></span>
        <span style="font-size:20px;" class="cinza">Buscando sempre soluções inovadoras</span>

    <br /><br />
</div>/*DIV MENU COMEÇA AQUI*/
    <div class="nvar">
        <ul>
            <li>@Html.ActionLink("Home", "Home")</li>
            <li>@Html.ActionLink("Clube", "Home")</li>
            <li class="nvarlist1">
                @Html.ActionLink("A Empresa", "Home")
            <div class="sub1">
                <ul>
                    <div class="arco1"></div>
                    <li>@Html.ActionLink("Quem somos", "Home")</li>
                    <li>@Html.ActionLink("A Equipe", "Home")</li>
                    <li>@Html.ActionLink("O que fazemos", "Home")</li>
                    <li>@Html.ActionLink("Objectivos", "Home")</li>
                    <li>@Html.ActionLink("Onde Estamos", "Home")</li>
                </ul>
            </div>
        </li>
        <li class="nvarlist">
            @Html.ActionLink("Serviços", "Home")
        <div class="sub2">
            <ul>
                <div class="arco2"></div>
                <li>@Html.ActionLink("Desinfestação", "Home")</li>
                <li>@Html.ActionLink("Limpeza", "Home")</li>
                <li>@Html.ActionLink("Ar-Condicionado", "Home")</li>
            </ul>
        </div>
    </li>
    <li>@Html.ActionLink("Contactos", "Home")</li>
</ul>
</div>
</div>
/*CONTEUDO DO TEXTO*/
</div> 

CSS

.botoes /*DIV PRINCIPAL*/
{
    width :955px;
    margin:0 auto ;
    
    right:0;
    ;
    height:auto; 
    
    /*passar a div para frente*/
    
}

/*DIV DO MENU COMEÇA AQUI*/

/*tirar os ponteiros*/
.nvar ul {
    list-style:none ;
    margin-
    margin-right:auto;
    margin:0;
    padding:0;
    margin-
    /*display: inline;*/
    

}

/*alinhar texto*/
.nvar li {
    float:left ;
    width:15%;
    text-align:center;
    ;
    font:normal 24px "Courier New", Courier, monospace;
    font-style:normal;
    color:#fff;
    background:#ff6a00;
    border:2px hidden  #ffffff;
    text-shadow:0px 0px 3px #f05be6;
    box-shadow:-1px 1px 6px #000000;
    -moz-box-shadow:-1px 1px 6px #000000;
    -webkit-box-shadow:-1px 1px 6px #000000;
    border-radius:0px 25px 0px 25px;
    -moz-border-radius:0px 25px 0px 25px;
    -webkit-border-radius:0px 25px 0px 25px;
    /*width:58px;*/
    padding:20px 10px;
    cursor:pointer;
    margin:0 auto;
}


/*separar os submenus*/
    .nvar li ul {
    ;
    
    }

/*alinhar os sub-menus*/
.nvar li ul li{
    float:none;
    width:120%;
    text-align:left;
    padding:4px;
}

/*cor do texto*/
.nvar a {
    font-family:'Trebuchet MS' Arial 'Arial Rounded MT';
    color:#fff;
    text-decoration:none;
    font-size:22px;
    display:block;
}

/*flecha nos sub-menus*/
.arco1 {
    width:0;
    height:0;
    border-
    border-right:12px solid transparent;
    border-bottom:12px solid grey;
    ;
    right:-40%;
}

.arco2 {
    width:0;
    height:0;
    border-
    border-right:12px solid transparent;
    border-bottom:12px solid grey;
    ;
    right:-40%;
}

/*desaparecer o submenu*/
.sub1 {
    
}

.sub2 {
    
}

/*aparecer o sub-menu com mouse move*/
.nvarlist:hover .sub2 {
    

}

.nvarlist1:hover .sub1 {
    

}

.nvar li:hover {
    background-color:red;
}
/*TERMINA AQUI*/

IMAGEM NO BROWSER

Answer 1

Primeiro ponto é que sua div precisa ter tamanho.

Segundo ponto é que seus elementos li não precisam de float, basta colocar o display como inline-block que o efeito será o mesmo.

Sua div tendo tamanho você coloca para ela: "margin: o auto" e tudo estará alinhado de acordo com o container que o tem.

---

Victor Santos | MCSD, MS, MTA

Answer 2

Você pode usar como recurso ou uma alternativa , um código CSS para realizar o alinhamento do jeito que você desejar :

você coloca a propriedade position com valor absolute ,top com o valor que você desejar para o alinhamento como por exemplo 10px e left para fazer o alinhamento a esquerda com o valor que você desejar para o posicionamento que deseja.Onde você altera os valores de top e left para realizar o posicionamento que você deseja na botão.