CODEWITHSUNDEEP
htmlcss
Jury
Jury

Reputation: 181

Center content inside of the border box

I tried to play all around the codes, but I didn't find a solution. Can anyone help me to center all content inside the border box?. I tried to search everywhere and I can't find the solution. Advance Thanks.

https://i.sstatic.net/f17JF.png

.menubar {
  width: 50vw;
  height: 5rem;
  background-color: #283747;
  margin: auto;
  border-bottom-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
  position: relative;
}

.mainMenu {
  list-style-type: none;
  text-align: center;
  position: relative;
}

li.navbar {
  list-style-type: none;
  display: inline-block;
  padding: .8rem 6rem 1rem 3rem;
  text-transform: uppercase;
  background: #fff;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1rem;
}

li.navbar a {
  color: #000;
  text-decoration: none;
}
<div class="menubar">

  <nav>
    <ul class="mainMenu">
      <li class="navbar"><a href="#">Hub</a></li>
      <li class="navbar"><a href="#">Blog</a></li>
      <li class="navbar"><a href="#">News</a></li>
    </ul>
  </nav>

</div>

Upvotes: 0

Views: 1939

Answers (2)

pavger
pavger

Reputation: 684

If you want to center the nav inside the .menubar container, give it these styles: display: flex; justify-content: center; align-items: center;. Then remove the default browser left padding on .mainMenu by giving it padding: 0.

.menubar {
  width: 50vw;
  height: 5rem;
  background-color: #283747;
  margin: auto;
  border-bottom-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainMenu {
  list-style-type: none;
  text-align: center;
  position: relative;
  padding: 0;
}

li.navbar {
  list-style-type: none;
  display: inline-block;
  text-transform: uppercase;
  background: #fff;
  border-radius: 1rem;
}

li.navbar a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 1rem 3rem 1rem 3rem;
}
<div class="menubar">

  <nav>
    <ul class="mainMenu">
      <li class="navbar"><a href="#">Hub</a></li>
      <li class="navbar"><a href="#">Blog</a></li>
      <li class="navbar"><a href="#">News</a></li>
    </ul>
  </nav>

</div>

Upvotes: 1

Mohammad Javad Noori
Mohammad Javad Noori

Reputation: 1217

Do You want this?

.menubar {
  height: auto;
  background-color: #283747;
  margin: auto;
  position: relative;
}

.mainMenu {
  list-style-type: none;
  text-align: center;
  position: relative;
  vertical-align: middle;
}

li {
  list-style-type: none;
  display: inline-block;
  padding: 1rem 4rem 1rem 3rem;
  background: #fff;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1rem;
  margin: 30px auto;
}

li.navbar a {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
}
<div class="menubar">

  <nav>
    <ul class="mainMenu">
      <li class="navbar"><a href="#">Hub</a></li>
      <li class="navbar"><a href="#">Blog</a></li>
      <li class="navbar"><a href="#">News</a></li>
    </ul>
  </nav>

</div>

jsfiddle

Upvotes: 0

Related Questions