Navbar Collapse with Brand 不会让我将链接居中

Question

我正在尝试制作一个左侧带有徽标的引导导航栏，当窗口缩小时会折叠。我想让页面之间的链接位于导航栏的中心，但是当我在我的 CSS 中将文本设置为 text-align: center 时，链接向右偏离了一个我只能假设是宽度的因素我的品牌。为了尝试修复，我尝试将文本位置设置为绝对位置，以及单独尝试时品牌的位置。尽管这两种方法都会使链接全屏显示在页面中间，但是当我缩小页面时，折叠功能不再起作用。有什么解决方案可以让链接位于屏幕的实际中心，同时保持折叠导航栏的能力？

#navcollapse{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#navbar-brand{
    height: 60px;
}

#nav{
    text-align: center;
 }

#logoimg{
    height : 60px;
    
}

.navbar-custom .navbar-nav .nav-link {
    color: #311149; 
}

.navbar-custom { 
    background-color: #e9ecef ; 
} 

<nav class="navbar navbar-custom navbar-expand-lg" id = "nav" >
        <a class="navbar-brand" id = "navbar-brand">
            <img src = "https://www.fifplay.com/img/public/premier-league-logo.png" id = "logoimg">
        </a>
        <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navcollapse" >
            &#9776;                     
        </button>
    </div>


    <div class="collapse navbar-collapse"></div> 

    <div class="collapse navbar-collapse" id="navcollapse">
        <div class="navbar-nav">
            <a href="{% url 'home' %}" class="nav-link "><h4>Table</h4></a>
            <a href="{% url 'fixtures' %}" class="nav-link"><h4>Fixtures</h4></a>
            <a href="" class="nav-link"><h4>Clubs</h4></a>
            <a href="" class="nav-link"><h4>Players</h4></a>
        </div>
    </div>
</nav>

Answer 1

你的意思是这样的：

要做到这一点，只需将#navcollapse内的所有代码注释掉：

#navcollapse {
     /* position: absolute; */
     /* left: 50%; */
     /* transform: translateX(-50%); */
  }

编辑：根据您的上一条评论，如果您愿意，可以通过为特定屏幕添加media 标签来实现：

  @media screen and (max-width: 991px) {
       #navcollapse {
           position: absolute;
           top: 80%;
           left: 50%;
           transform: translateX(-50%);
       }
   }

您可以将top: 80% 编辑为所需的百分比。