文本无法在 Bootstrap 导航栏切换中居中答案

【问题标题】：Text can't center in Bootstrap navbar-toggle文本无法在 Bootstrap 导航栏切换中居中
【发布时间】：2020-10-25 00:58:15
【问题描述】：

我的文本不能在可折叠切换中居中对齐。我认为这是因为 text-align 与 attritube 对齐......我尝试了很多方法，但似乎仍然无法得到它。介意帮忙吗？谢谢！！

使用 Twitter-Bootstrap 4.5.1

代码sn-p：

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

【问题讨论】：

标签： javascript html css twitter-bootstrap web

【解决方案1】：

尝试不使用浮点数：

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

【讨论】：

【解决方案2】：

如果您认为如何对齐 .li 元素，我会建议您这样做 - 我也在使用它。例如：

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

......... 对每个 li 元素执行此操作。希望对您有所帮助！

【讨论】：