Center content inside of the border box

Question

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.stack.imgur.com/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>

So did you want to center the text inside the `li` vertically and horizontally? — pavger, Feb 04 '18 at 05:14
Or did you mean center the white buttons inside the `.menubar` container? What do you mean by border-box? — pavger, Feb 04 '18 at 05:21
the text inside the box, you can check it here. https://imgur.com/a/ktbs7 — Jury, Feb 04 '18 at 05:42
@pavger you can check the image here, ill put an ink there to see the difference https://imgur.com/a/ktbs7 — Jury, Feb 04 '18 at 05:44
I've updated my answer. The text is now also centered inside the links. — pavger, Feb 04 '18 at 05:51
Possible duplicate of [Center

into div](https://stackoverflow.com/questions/1708054/center-ul-li-into-div) — Temani Afif, Feb 04 '18 at 08:15

score 1 · Accepted Answer · edited Feb 04 '18 at 08:16

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>

score 0 · Answer 2 · answered Feb 04 '18 at 05:44

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

Center content inside of the border box

2 Answers2