How do I center links from a navbar viewed on bootstrap 3 mobiles?

Question

Next, I’m using the version of bootstrap 3.7.2 to make a navbar and I set it so that when "collapsed", that is, when we view on mobile devices, it gets the toggle button on the right and the logo is located on the left due to css settings. So far so good, but when clicked, the links appear with a left alignment. What configuration can I use to align these links to the center of this "dropdown" created by bootstrap only in this view?

Follow the navbar code:

    <nav class="navbar navbar-fixed-top navbar-default navbar-fundo"> <!-- Barra de Navegação -->

        <div class="container-fluid"> <!-- Agrupar logo toggle e links -->

            <div class="navbar-header">

                <!-- Botão Alternar -->
                <button type="button" class="navbar-toggle collapsed navbar-right" data-toggle="collapse" data-target="#barra-navegacao" aria-expanded="false">
                    <span class="sr-only">Alternar navegação</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Logo Carta -->
                <a class="navbar-brand" href="index.html">
                    <span class="img-logo">Logo</span>
                </a>
            </div> <!--/navbar-header-->

            <!-- navbar -->
            <div class="collapse navbar-collapse" id="barra-navegacao">
                <ul class="nav navbar-nav">
                    <li class="active font_nav">
                        <a href="index.html">
                            Home
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="relatos.html">
                            Relatos
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="escreva.html">
                            Escreva seu relato
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="info.html">
                            Informações
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="privacidade.html">
                            Privacidade
                        </a>
                    </li>                   
                </ul>

            </div> <!--/itens da barra-navegacao-->


        </div> <!--/nav container-fluid-->

    </nav>

Another less important thing: you can make the link that is currently active appear in the center of the navbar as if it were the title of the page?

Answer 1

Add the class text-center in ul navbar-nav.

Behold:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-fixed-top navbar-default navbar-fundo"> <!-- Barra de Navegação -->

        <div class="container-fluid"> <!-- Agrupar logo toggle e links -->

            <div class="navbar-header">

                <!-- Botão Alternar -->
                <button type="button" class="navbar-toggle collapsed navbar-right" data-toggle="collapse" data-target="#barra-navegacao" aria-expanded="false">
                    <span class="sr-only">Alternar navegação</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Logo Carta -->
                <a class="navbar-brand" href="index.html">
                    <span class="img-logo">Logo</span>
                </a>
            </div> <!--/navbar-header-->

            <!-- navbar -->
            <div class="collapse navbar-collapse" id="barra-navegacao">
                <ul class="nav navbar-nav text-center">
                    <li class="active font_nav">
                        <a href="index.html">
                            Home
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="relatos.html">
                            Relatos
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="escreva.html">
                            Escreva seu relato
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="info.html">
                            Informações
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="privacidade.html">
                            Privacidade
                        </a>
                    </li>                   
                </ul>

            </div> <!--/itens da barra-navegacao-->


        </div> <!--/nav container-fluid-->

    </nav>