1

Quero pedir ajuda para uma coisa que estou tentando há muito tempo. Não consigo, já vi vários posts e ninguém explica direito o que está errado ou o que devo fazer. Estou tentando alinhar um menu ao meio da página:

Código HTML:

    <div id="menu">
        <header>
            <nav class="menu">  
                <ul>
                    <li class="menu"><a href="br.html" target="_self"><img id="logo" src="br/_imagens/logo.png" alt="logo" onmousemove="mudaLogo()" onmouseout="mudaLogo2()"></a></li>
                    <li><a href="br/mac.html" target="_self">Mac</a></li>
                    <li><a href="br/ipad.html" target="_self">iPad</a></li>
                    <li><a href="br/iphone.html" target="_self">iPhone</a></li>
                    <li><a href="br/watch.html" target="_self">Watch</a></li>
                    <li><a href="br/tv.html" target="_self">TV</a></li>
                    <li><a href="br/music.html" target="_self">Music</a></li>
                </ul>
            </nav>
        </header>
    </div>

Código CSS:

nav.menu{
    width: 100%;
    height: 44px;
    background-color: rgba(49, 49, 49, 0.95);
    position: fixed;
    z-index: 3;
}
nav.menu ul{
    list-style: none;
    position: relative;
}
nav.menu ul li{
    width: 150px;
    float: left;
}
nav.menu ul li.menu{
    margin: -25px;
    padding: 0px;
}
nav.menu a{
    padding: 15px;
    display: block;
    text-align: center;
    color: white;
    text-decoration: none;
}
nav.menu ul li:hover a{
    color: #A5A5A5;
}

Me ajudem pfv, estou tentando faz muito tempo.

3
  • Cntro Horizontal ou vertical, ou nos dois eixos?
    – hugocsl
    Commented 9/07/2019 às 14:57
  • Horizontal, lá em cima so que no meio da tela. Commented 9/07/2019 às 14:58
  • Eu não entendi porque você usou nav.menu. nav antes do menu significa o que? Commented 9/07/2019 às 15:01

2 Respostas 2

0

Não use float left. Isso faz com que os elementos fiquem alinhados à esquerda. Retire o margin: -25px da logo. Resete margens e espaçamento da ul. Coloque display: inline-block nas li's e centralize com text-align: center na ul:

body{
   margin: 0;
}

nav.menu{
    width: 100%;
    height: 44px;
    background-color: rgba(49, 49, 49, 0.95);
    position: fixed;
    z-index: 3;
}
nav.menu ul{
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
   text-align: center;
}
nav.menu ul li{
   display: inline-block;
    width: 150px;
}
nav.menu ul li.menu{
    padding: 0px;
}
nav.menu a{
    padding: 15px;
    display: block;
    text-align: center;
    color: white;
    text-decoration: none;
}
nav.menu ul li:hover a{
    color: #A5A5A5;
}
<div id="menu">
     <header>
         <nav class="menu">  
             <ul>
                 <li class="menu"><a href="br.html" target="_self"><img id="logo" src="br/_imagens/logo.png" alt="logo" onmousemove="mudaLogo()" onmouseout="mudaLogo2()"></a></li>
                 <li><a href="br/mac.html" target="_self">Mac</a></li>
                 <li><a href="br/ipad.html" target="_self">iPad</a></li>
                 <li><a href="br/iphone.html" target="_self">iPhone</a></li>
                 <li><a href="br/watch.html" target="_self">Watch</a></li>
                 <li><a href="br/tv.html" target="_self">TV</a></li>
                 <li><a href="br/music.html" target="_self">Music</a></li>
             </ul>
         </nav>
     </header>
 </div>

13
  • Vou tentar isso, obrigado pela dica do float: left. Commented 9/07/2019 às 15:17
  • Blz. Esses mouseover e mouseout na logo tb está ruim. Se isso for pra mudar a logo com o mouse, dá pra fazer de uma forma bem melhor. Se quiser te mostro um exemplo. Abs!
    – Sam
    Commented 9/07/2019 às 15:19
  • kk isso foi uma confusão minha também, é a mesma imagem só que a opacidade diminui um pouco(to refazendo o site da apple), tentei fazer com o hover mas fiz errado(percebi dps) eu achei que não funcionava com o hover e acabei tendo que fazer outra imagem com a opacidade meno e fiz esses eventos. Commented 9/07/2019 às 15:24
  • Isso vc faz no CSS, não precisa de JavaScript.
    – Sam
    Commented 9/07/2019 às 15:25
  • int, foi erro meu mesmo. Ainda estou aprendendo Commented 9/07/2019 às 15:26
0

Na UL da NAV vc coloca display:inline-block, assim ela vai ficar apenas do tamanho do próprio conteúdo, tendo apenas o tamanho do próprio conteúdo e não a largura da tela inteira, vc consegue centraliza-la no meio da NAV, já que a NAV sim ocupa 100% da largura da tela. Depois disso na própria NAV vc coloca text-align:center. Como vc definiu a UL como inline-block ela pode receber propriedade como text-align:center vinda do container pai, no caso a NAV

inserir a descrição da imagem aqui

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

nav.menu{
    width: 100%;
    height: 44px;
    background-color: rgba(49, 49, 49, 0.95);
    position: fixed;
    z-index: 3;
    text-align: center;
}
nav.menu ul{
    list-style: none;
    position: relative;
    display: inline-block;
}
nav.menu ul li{
    width: 150px;
    float: left;
}
nav.menu ul li.menu{
    margin: -25px;
    padding: 0px;
}
nav.menu a{
    padding: 15px;
    display: block;
    text-align: center;
    color: white;
    text-decoration: none;
}
nav.menu ul li:hover a{
    color: #A5A5A5;
}

<body>
    
<div id="menu">
    <header>
        <nav class="menu">  
            <ul>
                <li class="menu"><a href="br.html" target="_self"><img id="logo" src="br/_imagens/logo.png" alt="logo" onmousemove="mudaLogo()" onmouseout="mudaLogo2()"></a></li>
                <li><a href="br/mac.html" target="_self">Mac</a></li>
                <li><a href="br/ipad.html" target="_self">iPad</a></li>
                <li><a href="br/iphone.html" target="_self">iPhone</a></li>
                <li><a href="br/watch.html" target="_self">Watch</a></li>
                <li><a href="br/tv.html" target="_self">TV</a></li>
                <li><a href="br/music.html" target="_self">Music</a></li>
            </ul>
        </nav>
    </header>
</div>

6
  • Vou tentar isso. Commented 9/07/2019 às 15:17
  • @LuizFilipe tenta ai e se ficar com alguma dívida é só me dar um toque
    – hugocsl
    Commented 9/07/2019 às 15:21
  • 1
    Funcionou cara valeu muito obrigado, falou o que estava errado e ainda explicou o porque. Aonde tem a opção de dar mil estrelas? Commented 9/07/2019 às 16:06
  • @LuizFilipe fico feliz em ter ajudado. Basicamente quando um filho tem 100% da largura do pai vc não não consegue alinha-lo no contro, pois ele já ocupa toda a largura entende, pra centralizar o filho tem que ser menor ou maior que o pai. Abs
    – hugocsl
    Commented 9/07/2019 às 16:15
  • 1
    nossa, agora entendi mais ainda, é como se fosse uma caixa, se o objeto é do tamanho da caixa não tem como colocar do lado esquerdo ou direito. vlw! Commented 9/07/2019 às 16:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .