How to make a UL center horizontally and vertically on a Nav?

Asked

Viewed 60 times

0

*{margin: 0; padding: 0;}
nav{ width: 100%; height: 100px; background:gy;margin: 0 auto;text-align: center;background: rgba(0,0,0, 0.6);}
nav ul{list-style: none; }
nav ul li {display: inline;padding: 5px; padding-top: 50px;}
nav ul li a {text-decoration: none; font-size: 20px; color: white;margin-top: 50px}
nav ul li:hover {background: rgb(18, 155, 219); transition: 1s linear}


body{background: url(https://i.ytimg.com/vi/0517Im379dI/maxresdefault.jpg);
background-repeat: no-repeat; background-size: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="estilo.css">
   
</head>
<body>
    <nav>
    <ul>
        <li><a href="#">Inicio<a></li>
        <li><a href="#">Contatos<a></li>
        <li><a href="#">produtos<a></li>
        <li><a href="#">Portifólio<a></li>
        <li><a href="#">Sobre Nós<a></li>
    </ul>
</nav>
</body>

</html>

html css
  • 1

    Your padding-top in LI did not work because you put display:inline in it. If you want to line up with padding like you tried to just put nav ul li {display: inline-block;..... woe to you padding-top will begin to "take effect".

  • Thank you so much for your help

  • Dispose, and even though you have already solved the problem there, take a half hour to read the answer I marked as duplicate. It will already help you solve half the alignment problems you will have in the future! []s

  • How do I close the question?

  • Don’t worry about it, let her be now clickbait for organic rss searches. But if you really want to delete have a link to remover in your question, just click on it...

1 answer

1

See if that’s what you need:

*{margin: 0; padding: 0;}
nav {
    width: 100%;
    height: 100px;
    background:gy;
    margin: 0 auto;
    text-align: center;
    background: rgba(0,0,0, 0.6);
    display: flex;
    align-items: center;
}
nav ul{
    list-style: none;
    margin: 0 auto;
}
nav ul li {display: inline;padding: 5px; padding-top: 50px;}
nav ul li a {text-decoration: none; font-size: 20px; color: white;margin-top: 50px}
nav ul li:hover {background: rgb(18, 155, 219); transition: 1s linear}


body{
    background: url(https://i.ytimg.com/vi/0517Im379dI/maxresdefault.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="estilo.css">
   
</head>
<body>
    <nav>
    <ul>
        <li><a href="#">Inicio<a></li>
        <li><a href="#">Contatos<a></li>
        <li><a href="#">produtos<a></li>
        <li><a href="#">Portifólio<a></li>
        <li><a href="#">Sobre Nós<a></li>
    </ul>
</nav>
</body>

</html>

Recommended reading: CSS-Tricks - A Complete Guide to Flexbox

  • 1

    thank you so much for your help

Browser other questions tagged html css

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