NavBar margin: auto, does not work

Question

I have just a simple html:

<body>
    <header id="cabecalho">
        <nav id="menu">
            <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Contact</li>
            </ul>
        </nav>
    </header>
</body>

CSS :

<style>
          *{
              padding: 0;
              margin: 0;    
          }
          html{
              width: 100%;
              height: 100%;
          }
          body{
              width: 100%;
              height: 100%;
          }
          header#cabecalho{
            width: 100%;
            height: 5%;
            background-color: rgb(60, 92, 86); 
            overflow: hidden;
          }
          nav#menu{
            display: block;
            height: 50%;
            width: 100%;
            overflow: hidden;
            margin-top: auto;
            margin-bottom: auto;
          }
          nav#menu ul{
            height: 100%;
            width: 100%;
            list-style: none;
          }
          nav#menu ul li{
              display:inline-block;
              color: white;  
          }


      </style>

I just want to vertical centralize the menu in the header, but it keeps on the top of it. obs: using margin: x Pixels works, but i don't think this is the best way to deal with that.

https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Temani Afif, Dec 23 '17 at 13:48
https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally — Temani Afif, Dec 23 '17 at 13:49
https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1 — Temani Afif, Dec 23 '17 at 13:50

score 0 · Accepted Answer · answered Dec 23 '17 at 14:17

0

There are multiple ways to tackle this.

I would target the nav and header and give it a position: relative;. Then I would give the menu a top: 50%; and transform: translate(-50%);

This moves the menu 50% down the header and pulls it back up 50% of its own height. Resulting in a centred menu.

If you want to centre the text inside the menu, I would suggest doing the same for the ul.

You can look at this for reference JS fiddle, but keep in mind that I have added a background to the menu and made the header larger for easy viewing.

answered Dec 23 '17 at 14:17

Mats

223
1
5
15

how were you able to add answer after question was closed ? – Temani Afif Dec 23 '17 at 14:34
Oh thanks! this really helped me! – Pedro leal Dec 23 '17 at 14:53
@TemaniAfif Guess I started making an answer before it was closed – Mats Dec 25 '17 at 21:19
@Pedroleal No problem. Would appreciate if you marked my answer as correct :) – Mats Dec 25 '17 at 21:21
even if you started making an answer you won't be able to add it. If you didn't hit the "post answer" button even there is an anwser it won't work ... strage – Temani Afif Dec 25 '17 at 21:32
Weird, I don't know. – Mats Dec 25 '17 at 21:47

NavBar margin: auto, does not work

1 Answers1