center align text inside navbar

Question

I have the following HTML, I am trying to center align the span tag inside 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

If you add a class name to the 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>

You can then use CSS.

.this {
    text-align: center;
}

Check code pen https://codepen.io/Jsilvestri/pen/LJBRNp