Center Horizontal Menu on Top of Screen in CSS

Asked

Viewed 4,397 times

1

My menu is on the left of the page, Exemplo de como fica o menu I want to leave it centered, How do I do ? Follow my HTML page and My CSS:

<!DOCTYPE HTML>
<html lang="pt-br">

  <head>
    <meta name="description" content="Como usar charset na <meta> tag">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Service Desk Leo Madeiras</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <link rel="shortcut icon" href="\img\favicon.ico" type="image/x-icon"/>    
  </head>

        <body background="\img\bg.jpg" bgproperties="fixed" aling="Center">             
            <nav>

                <ul class="menu">

                    <li><a href="\index.html">Home</a></li>

                    <li><a href="#">Service Desk</a>
                        <ul>
                            <li><a href="\Celular Gerentes.html" target="_blank">Gerentes</a></li>
                            <li><a href="Lista de lojas.html" target="_blank">Lojas</a></li>
                            <li><a href="Chamados.html" target="_blank">Chamados</a></li>
                            <li><a href="Dados_Pdvs.html" target="_blank">Ponto de venda</a></li>
                            <li><a href="Ramais.html" target="_blank">Ramais LEO</a></li>                 
                        </ul>
                    </li>

                    <li><a href="#">Sistemas</a>
                        <ul>
                            <li><a href="http://contecomigo.leomadeiras.com.br:8080/html/index.php" target="_blank">Conte Comigo</a></li>
                            <li><a href="http://kcs.premierit.com.br/leomadeiras/#keep" target="_blank">Base de Conhecimento</a></li>
                            <li><a href="http://10.25.59.31:8080/casi/home.xhtml" target="_blank">Casi</a></li>
                            <li><a href="http://www.sintegra.gov.br/" target="_blank">Sintegra</a></li>                       
                        </ul>
                    </li>

                    <li><a href="#">NFE</a>
                        <ul>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_outb_monitor?sap-client=500&sap-language=PT#" target="_blank">Monitor NFE</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_batch_monitor?sap-client=500#" target="_blank">Monitor de Lote</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_servsta_monitor?sap-system-login-basic_auth=X&sap-client=500&sap-language=PT#" target="_blank">Monitor Status Serviço NFE</a></li>
                            <li><a href="http://www.nfe.fazenda.gov.br/portal/disponibilidade.aspx?versao=0.00&tipoConteudo=Skeuqr8PQBY=" url="Monitor Status Fazenda" target="_blank">Monitor Status Fazenda</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_log_workplace?sap-system-login-basic_auth=X&sap-client=500&sap-language=PT#" target="_blank">Monitor Logistico NFE</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_fiscal_workplace?sap-language=PT#" target="_blank">Monitor Fiscal</a></li> 
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/event_batch_monitor?sap-client=500#" target="_blank">Monitor Lote Evento</a></li> 
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/event_monitor?sap-language=PT#" target="_blank">Monitor de Evento Saída</a></li>                      
                        </ul>
                </li>

                <li><a href="#">Monitoramento</a>
                        <ul>
                            <li><a href="http://172.30.0.177/zabbix/zabbix.php?action=map.view&ddreset=1" target="_blank">Zabbix</a></li>
                            <li><a href="http://100.0.0.110/cgi-bin/index" target="_blank">Traffip</a></li>
                            <li><a href="http://ecmon/cacti/index.php" target="_blank">Cacti</a></li>                  
                        </ul>
                </li>

                <li><a href="#">Premier</a>
                        <ul>
                            <li><a href="http://forponto.premierit.com.br/forponto/fptoweb.exe/pientramarcacao" target="_blank">Ponto Premier</a></li> 
                            <li><a href="http://webmail.premierit.com.br/#1" target="_blank">Zimbra</a></li>
                            <li><a href="http://dp.premierit.com.br:8080/web/guest" target="_blank">DPWEB</a></li>
                            <li><a href="http://premierit.konviva.com.br/lms/#/login" target="_blank">Konviva</a></li>                  
                        </ul>
                </li>                 





</ul>
</nav>


                   <center><img src="\img\logo.png"></center>


         <center> <h1> <font color= "Green" face="Arial Black"> INTRANET SERVICE DESK </font> <br /></h1> </center>           


    </body>

</html>

CSS:

*{margin: 0; padding: 0;}

body{
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
}


a{
            display:inline-block;
            text-decoration:none;
            padding:6px 4px;
            border:0px solid #ccc;
            background-color:#f2f2f2;
            color:#333;
            font:15px arial, sans-serif;
}
a:hover{
            border-color:#aaa;

}

.menu{list-style:none; border:1px solid #c0c0c0; float:left;}

.menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

.menu li   ul{position:absolute; top:25px; left:0; background-color:#fff; display:none; }

.menu li:hover ul, .menu li.over ul{display:block;}

.menu li ul li{border:1px solid #c0c0c0; display:block; width:150px;}
html css

1 answer

1


You can add style display-flex at the <nav> and centralize with justify-content: center;:

nav{
   display: flex;
   justify-content: center;
}


*{margin: 0; padding: 0;}

body{
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
}


a{
            display:inline-block;
            text-decoration:none;
            padding:6px 4px;
            border:0px solid #ccc;
            background-color:#f2f2f2;
            color:#333;
            font:15px arial, sans-serif;
}
a:hover{
            border-color:#aaa;

}

nav{
   display: flex;
   justify-content: center;
}

.menu{list-style:none; border:1px solid #c0c0c0; float:left;}

.menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

.menu li   ul{position:absolute; top:25px; left:0; background-color:#fff; display:none; }

.menu li:hover ul, .menu li.over ul{display:block;}

.menu li ul li{border:1px solid #c0c0c0; display:block; width:150px;}
<body background="\img\bg.jpg" bgproperties="fixed" aling="Center">             
            <nav>

                <ul class="menu">

                    <li><a href="\index.html">Home</a></li>

                    <li><a href="#">Service Desk</a>
                        <ul>
                            <li><a href="\Celular Gerentes.html" target="_blank">Gerentes</a></li>
                            <li><a href="Lista de lojas.html" target="_blank">Lojas</a></li>
                            <li><a href="Chamados.html" target="_blank">Chamados</a></li>
                            <li><a href="Dados_Pdvs.html" target="_blank">Ponto de venda</a></li>
                            <li><a href="Ramais.html" target="_blank">Ramais LEO</a></li>                 
                        </ul>
                    </li>

                    <li><a href="#">Sistemas</a>
                        <ul>
                            <li><a href="http://contecomigo.leomadeiras.com.br:8080/html/index.php" target="_blank">Conte Comigo</a></li>
                            <li><a href="http://kcs.premierit.com.br/leomadeiras/#keep" target="_blank">Base de Conhecimento</a></li>
                            <li><a href="http://10.25.59.31:8080/casi/home.xhtml" target="_blank">Casi</a></li>
                            <li><a href="http://www.sintegra.gov.br/" target="_blank">Sintegra</a></li>                       
                        </ul>
                    </li>

                    <li><a href="#">NFE</a>
                        <ul>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_outb_monitor?sap-client=500&sap-language=PT#" target="_blank">Monitor NFE</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_batch_monitor?sap-client=500#" target="_blank">Monitor de Lote</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_servsta_monitor?sap-system-login-basic_auth=X&sap-client=500&sap-language=PT#" target="_blank">Monitor Status Serviço NFE</a></li>
                            <li><a href="http://www.nfe.fazenda.gov.br/portal/disponibilidade.aspx?versao=0.00&tipoConteudo=Skeuqr8PQBY=" url="Monitor Status Fazenda" target="_blank">Monitor Status Fazenda</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_log_workplace?sap-system-login-basic_auth=X&sap-client=500&sap-language=PT#" target="_blank">Monitor Logistico NFE</a></li>
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/nfe_fiscal_workplace?sap-language=PT#" target="_blank">Monitor Fiscal</a></li> 
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/event_batch_monitor?sap-client=500#" target="_blank">Monitor Lote Evento</a></li> 
                            <li><a href="http://leosappip.leomadeiras.com.br:50000/sap/bc/webdynpro/xnfe/event_monitor?sap-language=PT#" target="_blank">Monitor de Evento Saída</a></li>                      
                        </ul>
                </li>

                <li><a href="#">Monitoramento</a>
                        <ul>
                            <li><a href="http://172.30.0.177/zabbix/zabbix.php?action=map.view&ddreset=1" target="_blank">Zabbix</a></li>
                            <li><a href="http://100.0.0.110/cgi-bin/index" target="_blank">Traffip</a></li>
                            <li><a href="http://ecmon/cacti/index.php" target="_blank">Cacti</a></li>                  
                        </ul>
                </li>

                <li><a href="#">Premier</a>
                        <ul>
                            <li><a href="http://forponto.premierit.com.br/forponto/fptoweb.exe/pientramarcacao" target="_blank">Ponto Premier</a></li> 
                            <li><a href="http://webmail.premierit.com.br/#1" target="_blank">Zimbra</a></li>
                            <li><a href="http://dp.premierit.com.br:8080/web/guest" target="_blank">DPWEB</a></li>
                            <li><a href="http://premierit.konviva.com.br/lms/#/login" target="_blank">Konviva</a></li>                  
                        </ul>
                </li>                 





</ul>
</nav>


                   <center><img src="\img\logo.png"></center>


         <center> <h1> <font color= "Green" face="Arial Black"> INTRANET SERVICE DESK </font> <br /></h1> </center>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.