文本無法在 Bootstrap 導航欄切換中居中

Question

我的文本不能在可折疊切換中居中對齊。 我認為這是因為 text-align 與 attritube 對齊......我嘗試了很多方法，但似乎仍然無法得到它。 介意幫忙嗎？ 謝謝！！

使用 Twitter-Bootstrap 4.5.1

代碼片段：

html

<div class="container">
            <div class="nav-header">
                <div class="navbar-brand">
                    <a href="index.html">
                        <h1>Food LLC.</h1></a><hr>
                </div>

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false" aria-controls="navbar">
                <span class="material-icons">menu</span> 
                </button> 
                

             <div id="collapsable-nav" class="collapse navbar-collapse">
             <ul id="nav-list" class="nav navbar-nav navbar-right">
                <li class="visible-xs active">
                    <a href="index.html">
                        Home
                    </a>
        </li>
        <li>
          <a href="chicken.html">Chicken</a>
        </li>
        <li>
          <a href="#">Beef</a>
        </li>
        <li>
          <a href="#">Sushi</a>
        </li>
        
      </ul><!-- #nav-list -->
    </div>
        </div>

CSS

    button.navbar-toggle{
  position: absolute;
  right: 50px;
  top: 10px;
}
.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

#nav-list{
  margin-top: 10px;
  margin-bottom: 10px;
  float: right;
  
}
#nav-list a {
  color: white;
  font-size: 1.3em;
  font-style: italic;
}
#nav-list li {
  margin-bottom: 5px;
}
#nav-list a:hover {
  text-decoration: none;
  color: #D3D3D3;
}

Answer 1

嘗試不使用浮動：

.navbar-nav {
    margin:0 auto;
    display: block;
    text-align: center;
}

Answer 2

如果您認為如何對齊 .li 元素，我會建議您這樣做 - 我也在使用它。 例如：

<center>
<li>Hello</li>
</center>

......... 並為每個 li 元素執行此操作。 希望對你有幫助！