Question

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

Answer 1

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

Answer 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

导航栏中的文本居中对齐

2 个答案: