How can i centre the list i wrote in navbar to center

user_17814643 0
Viewed 55

i am trying to center the list i made under the tag navlist in the navbar which is a div with class bar . Can u tell how do i do it , below are the html and css code . The navbar is the one on top with green color

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div class="bar">
   <nav>
     <ul class="navlist">
       <li><a href='#' class="link1">Search</a></li>
       <li><a href='#' class="link1">Browse</a></li>
       <li><a href='#' class="link1">Tags</a></li>
       <li><a href='#' class="link1">Filter</a></li>
       <li><a href='#' class="link1">Dev</a></li>
     </ul>
    </nav>
 </div>
 </div>
</body>
</html>

*{
  margin: 0px;
}

.navlist{
  list-style: none ;
  display: flex ;
  background: red ;
  padding: 0px ;
  margin: 0px ;
  width: 300px
}

.bar{
  height:100px ;
  background: green ;
  justify-content: center
  
}

.link1{
  padding-left: 10px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}
css html
4 Answers

Please add 'margin: 0 auto;' to .navlist

user_172879400

when you use justify-content and/or align-items, you need to add display: flex; to that 

* {
  margin: 0;
}


/* you don't need a div, you can just use the nav*/

nav {
  height: 100px;
  background: green;
  display: flex;
  
  /* this is for centering it horizontally */
  justify-content: center;
  
  /* this is for centering it vertically */
  align-items: center;
}

.navlist {
  list-style: none;
  display: flex;
  background: red;
  padding: 0px;
  margin: 0px;
  width: 300px;
}

.link1 {
  padding-left: 10px;
  text-decoration: none;
  color: black;
  font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>

<body>
  <nav>
    <ul class="navlist">
      <li><a href="#" class="link1">Search</a></li>
      <li><a href="#" class="link1">Browse</a></li>
      <li><a href="#" class="link1">Tags</a></li>
      <li><a href="#" class="link1">Filter</a></li>
      <li><a href="#" class="link1">Dev</a></li>
    </ul>
  </nav>
</body>

</html>

user_90093940

To achieve this solution, I enclose the <nav> element in a <div> container and put the <nav> element in the middle of the page applying the specialContainer class style:

<style>
.specialContainer{
  display: flex;
  justify-content: center;
}
</style>

<div class="specialContainer">
    <nav></nav>
</div>


*{
  margin: 0px;
}

.navlist{
margin: 0 auto;
  list-style: none ;
  display: flex ;
  background: red ;
  padding: 0px ;
  margin: 0px ;
  width: 300px
}

.bar{
  height:100px ;
  background: green ;
  justify-content: center
  
}

.link1{
  padding-left: 10px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}

/* Added the following css class. */
.specialContainer{
  display: flex;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div class="bar">
  <!-- The following element has been added. -->
   <div class="specialContainer">
     <nav>
       <ul class="navlist">
         <li><a href='#' class="link1">Search</a></li>
         <li><a href='#' class="link1">Browse</a></li>
         <li><a href='#' class="link1">Tags</a></li>
         <li><a href='#' class="link1">Filter</a></li>
         <li><a href='#' class="link1">Dev</a></li>
       </ul>
      </nav>
    </div>
 </div>
</body>
</html>

user_150326880

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

*{
    margin: 0px;
  }
  
  .navlist{
    list-style: none ;
    display: flex ;
    background: red ;
    padding: 0px ;
    /* margin: 0px ; */
    width: 300px
  }
  
  .bar{
    height:100px ;
    background: green ;
    justify-content: center;
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center; /* Vertical */
  }
  
  .link1{
    padding-left: 10px;
    text-decoration: none ;
    color: black ;
    font-size: 20px
  }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div class="bar">
   <nav>
     <ul class="navlist">
       <li><a href='#' class="link1">Search</a></li>
       <li><a href='#' class="link1">Browse</a></li>
       <li><a href='#' class="link1">Tags</a></li>
       <li><a href='#' class="link1">Filter</a></li>
       <li><a href='#' class="link1">Dev</a></li>
     </ul>
    </nav>
 </div>
 </div>
</body>
</html>

user_119875940
Related