边框内的中心内容

Question

我试图围绕代码玩，但我没有找到解决方案。任何人都可以帮助我将所有内容集中在边框内吗？我试图到处搜索，但我无法找到解决方案。提前谢谢。

https://i.stack.imgur.com/f17JF.png

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您想将导航集中在.menubar容器中，请为其指定以下样式：display: flex; justify-content: center; align-items: center;。然后通过提供.mainMenu删除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>

Answer 2

你想要这个吗？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

jsfiddle