1

Tenho os seguinte botões na minha navbar:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="~/Painel/Index" style="padding:5px">
                <img width="90" height="40" alt="" src="..." />
            </a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="ulTelas">

                <li><a href="/HorasPendencia/HorasPendencia">Horas Pendências</a></li>
                <li><a href="#">Aferições</a></li>
                <li><a href="#">Índice OCR</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <div class="btn-group ex" data-toggle="buttons" style="vertical-align:middle">
                    <label class="btn btn-primary btn-sm">
                        <input type="radio" name="options" id="blocos" value="blocos"> <span class="glyphicon glyphicon-th"></span>
                    </label>
                    <label class="btn btn-primary btn-sm">
                        <input type="radio" name="options" id="lista" value="lista"> <span class="glyphicon glyphicon-align-justify"></span>
                    </label>
                </div>
                <a class="btn btn-success btn-sm" id="infopopover" rel="popover" data-style="primary"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a>
                <input type="hidden" id="modoexibicao" />
                <input type="hidden" id="contratocod" />

                @Html.Partial("_LoginPartial")

            </ul>

        </div>

    </div>
</div>

Estão sendo exibidos da seguinte maneira:

inserir a descrição da imagem aqui

Gostaria que eles ficassem alinhados no centro do navbar. O que fazer ?

4
  • 1
    Publiquei uma resposta meio ampla, apesar de você postar o seu cógio html e falar que está usando o bootstrap, ainda faltam algumas informações como css, questão das alturas dos elementos, se da suporte responsivo, etc. caso queira algo mais definido só comentar aqui com estas informações e eu edito minha resposta ^^ Commented 16/09/2016 às 20:42
  • Alinhar verticalmente elementos costuma ser complicado ou requer um layout fixo. Mas se estiver usando flexbox é muito simples: basta usar a propriedade align-items: center.
    – rodorgas
    Commented 16/09/2016 às 21:10
  • @AldoFernandesJunior coloquei a div inteira do meu navbar. Espero ter ajudado Commented 19/09/2016 às 11:48
  • @RaphaelPradodeOliveira Opa beleza, dessa forma consegui já montar o teste ali com a sua própria navbar :). Ja fiz a edição na resposta, espero que tenha ajudado :) Commented 19/09/2016 às 14:04

1 Resposta 1

2

Há várias formas possíveis de fazer isto, umas mais performáticas que outras.

Seu navbar tem alguma altura fixa? E os botões? Caso tenham, você poderia adicionar um margin-top com a metade da subtração entra a altura do navbar e a altura do botão.

Você poderia também, em vez de ter os elementos jogados em seu navbar, coloca-los todos em um container a dar os espaços para cima e para baixo com padding ou margin.

Depende da aplicação de seu layout. usando o bootstrap, quando quero inserir novos elementos eu os centralizo verticalmente cor a margin-top, mas tomo muito cuidado para todas as minhas versões de visualizações responsivas, da qual posso trata-las com o @media screen

@edit: Com o seu código já consegui dar uma ajuda melhor :) Utilizei da mesma maneira que o Rodorgas havia citado, coloquei a altura em sua div navbar-nav fixa de 50px que é o padrão do navbar do bootstrap, e utilizei display:flex e align-items:center;.

.navbar-nav {height:50px; display:flex; align-items:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="~/Painel/Index" style="padding:5px">
                <img width="90" height="40" alt="" src="..." />
            </a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="ulTelas">

                <li><a href="/HorasPendencia/HorasPendencia">Horas Pendências</a></li>
                <li><a href="#">Aferições</a></li>
                <li><a href="#">Índice OCR</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <div class="btn-group ex" data-toggle="buttons" style="vertical-align:middle">
                    <label class="btn btn-primary btn-sm">
                        <input type="radio" name="options" id="blocos" value="blocos"> <span class="glyphicon glyphicon-th"></span>
                    </label>
                    <label class="btn btn-primary btn-sm">
                        <input type="radio" name="options" id="lista" value="lista"> <span class="glyphicon glyphicon-align-justify"></span>
                    </label>
                </div>
                <a class="btn btn-success btn-sm" id="infopopover" rel="popover" data-style="primary"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a>
                <input type="hidden" id="modoexibicao" />
                <input type="hidden" id="contratocod" />

            </ul>

        </div>

    </div>
</div>

Espero ter ajudado.

1

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 .