3

Eu tenho uma nav bar que preciso colocar seu conteúdo no centro da tela, já tentei vários códigos mas ela sempre fica pro lado esquerdo, segue meu código atual

<nav class="navbar navbar-inverse navbar-fixed-top justify-content-center" style="background-color: #e7ebd5;">
        <div class="container">
            <div class="navbar-header">
                <div class="row justify-content-center">                  
                        <div id="ImagemLogo">
                            <img src="~/images/TerraVerdeLogo.png" class="img-responsive"> 
                    </div>
                </div>


                        <a asp-area="" asp-controller="Home" style="color:#ffffff ; font-size:15px;text-align:center" asp-action="Index" class="navbar-brand">Home</a>


                        <a asp-area="" asp-controller="Loja" style="color:#ffffff; font-size:15px;" asp-action="Index" class="navbar-brand">Loja</a>


                        <a asp-area="" asp-controller="Home" style="color:#ffffff; font-size:15px;" asp-action="LoginCliente" class="navbar-brand">Login/Cadastro de Clientes</a>


            </div>
            @inject IHttpContextAccessor HttpContextAccessor
            <div id="NomeUsuarioLogado"></div>
            @inject IHttpContextAccessor HttpContextAccessor
            <div id="NomeClienteLogado"></div>
        </div>

    </nav>
0

1 Resposta 1

5

Veja que vc está colocando a classe justify-content-center na navbar, porém vc colocou como filho direto dessa navabar uma div com a classe container, isso impede o alinhamento centralizado.

Para corrigir isso basta vc colocar a classe justify-content-center direto no container dentro da navbar.

OBS: Apesar disso acho que é bem errado clocar um container dentro da navbar. Vc deveria seguir a documentação para não ter problemas no futuro! https://getbootstrap.com/docs/4.1/components/navbar/

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<nav class="navbar navbar-inverse navbar-fixed-top " style="background-color: #e7ebd5;">
    <div class="container justify-content-center">
        <div class="navbar-header">
            <div class="row justify-content-center">
                <div id="ImagemLogo">
                    <!-- <img src="~/images/TerraVerdeLogo.png" class="img-responsive"> -->
                    <img src="https://placecage.com/100/100" class="img-responsive">
                </div>
            </div>
            <a asp-area="" asp-controller="Home" style="color:#ffffff ; font-size:15px;text-align:center"
                asp-action="Index" class="navbar-brand">Home</a>
            <a asp-area="" asp-controller="Loja" style="color:#ffffff; font-size:15px;" asp-action="Index" class="navbar-brand">Loja</a>
            <a asp-area="" asp-controller="Home" style="color:#ffffff; font-size:15px;" asp-action="LoginCliente"
                class="navbar-brand">Login/Cadastro de Clientes</a>
        </div>
        <!-- @inject IHttpContextAccessor HttpContextAccessor -->
        <div id="NomeUsuarioLogado">logado</div>
        <!-- @inject IHttpContextAccessor HttpContextAccessor -->
        <div id="NomeClienteLogado">logado</div>
    </div>

</nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .