none
COMO CENTRALIZAR OS BOTÕES DENTRO DE UMA DIV RRS feed

  • Pergunta

  • 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


    • Editado GILBLAZER sábado, 19 de julho de 2014 15:39
    sábado, 19 de julho de 2014 15:13

Respostas

  • 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

    segunda-feira, 21 de julho de 2014 19:32

Todas as Respostas

  • 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

    segunda-feira, 21 de julho de 2014 19:32
  • 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.



    • Editado Vitorlemos quinta-feira, 24 de julho de 2014 01:16
    quinta-feira, 24 de julho de 2014 01:11