中心对齐导航栏中的文本

Posted 2021-05-05

我有以下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>

答案

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

另一答案

如果你向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