在导航栏中居中对齐文本答案

【问题标题】：center align text inside navbar在导航栏中居中对齐文本
【发布时间】：2019-02-23 23:51:23
【问题描述】：

我有以下 HTML，我正在尝试将 span 标记在 ul li 内居中对齐。

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="../">
            </a>

            <ul class="nav navbar-nav">
                <li>
                    <span>Need to Center align</span>
                </li>
            </ul>
        </div>
    </div>
</nav>

【问题讨论】：

这很棘手。对于其他元素，您可以使用text-center 或mx-auto，但使用<li>，您需要稍微修改一下：stackoverflow.com/questions/45782973/…
text-align center in <li> element的可能重复

标签： html css twitter-bootstrap-3

【解决方案1】：

<li class=“text-center”><span>...centered text</span></li>

【讨论】：

【解决方案2】：

如果给li添加类名

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="https://www.w3schools.com/images/w3schools_green.jpg" height=500, width= 400>
            </a>

            <ul class="nav navbar-nav">
                <li class="this">
                    <span>Need to Center align</span>
                </li>
            </ul>
        </div>
    </div>
</nav>

然后您可以使用 CSS。

.this {
    text-align: center;
}

查码笔https://codepen.io/Jsilvestri/pen/LJBRNp

【讨论】：

我在回答时没有看到用户在下面回答。同样的答案......对不起