marcos.cardoso 10 Denunciar post Postado Novembro 2, 2012 Boa tarde. Gostaria de saber como alinhar um menu utilizando nav ao centro da página. Tentei de uma maneira mas não deu certo. Obrigado desde já. Meu html: <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <nav id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Produtos</a></li> <li><a href="#">Missão</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contato</a></li> </ul> </nav> </body> </html> Meu Css: #menu { text-align:center; } #menu ul { padding:10px; margin:0px; /*float:left;*/ display: inline-block; width:100%; background-color:#EDEDED; list-style:none; text-align: center; } #menu ul li { display:inline; } #menu ul li a { padding: 2px 10px; float: left; /* visual do link */ background-color: #EDEDED; color: #333; text-decoration: none; border-bottom: 3px solid #EDEDED; } #menu ul li a:hover { background-color: #D6D6D6; color: #6D6D6D; border-bottom: 3px solid #EA0000; } Compartilhar este post Link para o post Compartilhar em outros sites
Diéssica 140 Denunciar post Postado Novembro 2, 2012 Para centralizar um elemento, o mesmo deve possuir uma largura fixa. Nenhum dos elementos do seu código possuem. Mas supondo que você queira centralizar os itens do seu menu no elemento 100% (barra), o CSS ficaria assim: #menu { padding:10px; /*float:left;*/ width:100%; background-color:#EDEDED; } #menu ul { padding:0; list-style:none; overflow:auto; width:350px; margin:0 auto; } Obs.: tirei o display:inline-block do ul, porque não fazia diferença. Usei a div menu para estilizar a barra e a ul como container das li (o mais correto) e determinei largura fixa e margin:auto. O HTML ficou o mesmo. :) Compartilhar este post Link para o post Compartilhar em outros sites
marcos.cardoso 10 Denunciar post Postado Novembro 3, 2012 Nossa, deu certo. Muito obrigado. Compartilhar este post Link para o post Compartilhar em outros sites
guitexa 0 Denunciar post Postado Julho 12, 2017 Olá, poderia me ajudar a centralizar um menu para mim por favor? Estou tendo dificuldades. Muito obrigado mesmo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> </head> <link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all"> <body bgcolor="#000000" style="margin:0px;"> <div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div> <nav id="site-navigation" class="main-navigation"> <div class="clearfix"> <ul> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul></div> </div> </nav></div> </body> </html> ul{ margin: 0; } ul { list-style: none; } a { text-decoration: none; } .clearfix:after { display: block; content: " "; clear: both; } #site-navigation { background-color: #111; border-top: 4px solid #289dcc; } li { float:left; position: relative; font-family: 'Open Sans', serif; font-weight: 300; } a { color: #ffffff; display: block; font-size: 14px; font-weight: 600; padding: 10px 12px; text-transform: uppercase; } .main-navigation a:hover, .main-navigation ul li.current-menu-item { background-color: #289dcc; } Compartilhar este post Link para o post Compartilhar em outros sites
