Align menu to center

Asked

Viewed 83 times

1

I want to ask for help with something I’ve been trying to do for a long time. I can’t, I’ve seen several posts and no one really explains what’s wrong or what I should do. I’m trying to line up a menu in the middle of the page:

HTML code:

    <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>

CSS code: 

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;
}

Help me pfv, I’ve been trying for a long time.

html css

  • Cntro Horizontal or vertical, or on both axes?

  • Horizontal, up there only that in the middle of the screen.

  • I don’t understand why you used nav.menu. Nav before menu means what?

2 answers

0


Do not use float left. This makes the elements align to the left. Remove the margin: -25px of the logo. Resete margins and spacing of the ul. Place display: inline-block in li’s and with text-align: center in 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>

  • I’ll try that, thanks for the tip of the float: left.

  • Blz. These mouseover and mouseout in the soon tb is bad. If this is to change the logo with the mouse, you can do it much better. If you want to show you an example. Abs!

  • kk this was a mess of mine too, it’s the same image only that the opacity decreases a little(to redo the apple site), I tried to do with the Hover but I did wrong(I noticed dps) i thought it didn’t work with Hover and I ended up having to make another image with opacity.

  • This you do in CSS, no need for Javascript.

  • int, it was my own mistake. I’m still learning

  • You are new to the site. Take a look at the [tour] page to learn more about the operation of the site.

  • It worked Thank you very much!

  • Dude, mark only 1 (only one) of the answers, the one you choose, and not all. By marking more than 1 you clear the other.

  • a, but both of them

  • Yes, but you can only score one, the one you chose the best one.

  • You have marked mine first and then marked the other. So mine is unchecked.

  • When you have 15 reputation points you can vote on arrows in more than one answer, but scoring is only in one.

  • ae right I understood

Show 8 more comments

0

In the UL of NAV you put display:inline-block, so it will only be the size of the content itself, having only the size of the content itself and not the width of the whole screen, you can center it in the middle of the NAV, since the NAV yes occupies 100% of the width of the screen. After that in itself NAV you put text-align:center. As you defined the UL as inline-block she can receive property like text-align:center coming from container father, in case the 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>

  • I’ll try that.

  • @Luizfilipe tries there and if he gets any debt just give me a call

  • 1

    It worked guy was worth many thanks, spoke what was wrong and still explained why. Where has the option to give a thousand stars?

  • @Luizfilipe is happy to have helped. Basically when a child is 100% the width of the father you can not align it at the counter, because it already occupies the whole width understands, to centralize the child has to be smaller or larger than the father. Abs

  • 1

    Wow, now I’ve understood even more, it’s like a box, if the object is the size of the box there’s no way to put on the left or right side. vlw!

  • @Exact Luizfilipe is just that!

Show 1 more comment

Browser other questions tagged html css

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