如何对齐导航栏css

Question

.home {
  background: transparent;
  border: 1px solid #fff;
  border-color: #fff;
  border-radius: 10px;
  font-weight: 700;
  padding: 14px 36px;
  margin-top: 200px;
  margin-right: 5px;
}

-

<nav>
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="home"><a href="#">About</a></li>
        <li class="home"><a href="#">Projects</a></li>
    <ul>
</nav>

---

我提供了我的HTML和CSS代码

网站看起来像：http://prntscr.com/im5t4e

如何将中间的3个按钮居中？

Answer 1

当您尝试将元素置于容器内部时，最好的方法是使用Flexbox，因为您可以轻松地将项目放在行或列中，更改其顺序等。在这种特殊情况下，您应该尝试将justify-content属性与中心值一起使用。最后，给display: inline元素赋予li属性，使它们显示为内联元素而不是块类型元素。

例：

CSS

nav {
  display: flex;
  justify-content: center;
}

li {
  display: inline;
}

HTML

<nav>
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="home"><a href="#">About</a></li>
    <li class="home"><a href="#">Projects</a></li>
  <ul>
</nav>

Answer 2

为text-align: center;提供ul和display: inline-block;的li。

ul{
    text-align:center;
}
.home {
    background: transparent;
    border: 1px solid #fff;
    border-color: #fff;
    border-radius: 10px;
    font-weight: 700;
    padding: 14px 36px;
    margin-top: 200px;
    margin-right: 5px;
    display: inline-block
}

<nav>
    <ul >
        <li class="home"><a href="#">Home</a></li>
        <li class="home"><a href="#">About</a></li>
        <li class="home"><a href="#">Projects</a></li>
    <ul>
</nav>