Aligning buttons on the NAVBAR

Asked

Viewed 2,175 times

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 being exhibited as follows:

inserir a descrição da imagem aqui

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

html5 css3 bootstrap nav-bar
  • 1

    I’ve published a rather broad response, although you post your html code and say you’re using bootstrap, there’s still some information missing such as css, question of the heights of the elements, if responsive support, etc. if you want something more defined just comment here with this information and I edit my reply ^^

  • Aligning elements vertically is often complicated or requires a fixed layout. But if you’re using flexbox it’s very simple: just use the property align-items: center.

  • @Aldofernandesjunior put the entire div of my navbar. I hope I helped

  • @Raphaelpradodeoliveira Opa beauty, so I was able to put the test there with his own navbar :). I’ve edited the answer, I hope it helped :)

1 answer

2


There are several possible ways to do this, some more performative than others.

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

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

It depends on the application of your layout. using bootstrap, when I want to insert new elements I center them vertically color to margin-top, but take great care for all my versions of responsive views, which I can handle with the @media screen

@Edit: With your code I have already been able to give a better help :) I used in the same way that Rodorgas had mentioned, I put the height in his div navbar-nav 50px fixed which is the standard of bootstrap navbar, and used display:flex and 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>

I hope I’ve helped.

Browser other questions tagged html5 css3 bootstrap nav-bar

You are not signed in. Login or sign up in order to post.