Aligning buttons in NAVBAR

Navigation
1

I have the following buttons on my 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>

They are displayed as follows:

I would like them to be aligned in the center of the navbar. What to do?

    
asked by anonymous 16.09.2016 / 19:52

1 answer

2

There are several ways you can do this, some more performative than others.

Does your navbar have any fixed height? And the buttons? If they have, you could add a margin-top with half the subtraction entering the height of the navbar and the height of the button.

You could also, instead of having the elements thrown in your navbar, put them all in one container to give the spaces up and down with padding or margin.

It depends on the application of your layout. using the bootstrap, when I want to insert new elements I centralize them vertically color the margin-top, but I'm very careful for all my versions of responsive visualizations, which I can treat with @media screen

@edit: With your code I've already been able to give you a better help :) I used the same way that Rodorgas had quoted, I set the height in its fixed% div of 50px which is the default bootstrap navbar, and I used navbar-nav and display:flex . 

.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><linkrel="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><divclass="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>

I hope I have helped.

    
16.09.2016 / 22:41
Does anyone know why MySQL Select sometimes does not Work? What is the setRequestHeader method used in pure AJAX in POST mode?