how to vertically align a . btn(bootstrap) button inside a Fixed top Nav menu?

Asked

Viewed 514 times

1

<code>inserir a descrição da imagem aqui</code>

#nav {
  background-color: #888888;
}
#nav h3 {
  margin-left: 3em;
}
#nav-right {
 display: table-cell;
}
.btn {
  height: 100%;
}
<div class="fluid-container">
<div class="row navbar-fixed-top" id="nav">
  <div class="col-lg-6" id="nav-left">
    <h3>Tiago Fuelber's Portfolio</h3>
  </div>
  <div class="col-lg-3  col-lg-offset-2" id="nav-right">
      <button type="button" class="btn btn-default">ABOUT</button>
      <button type="button" class="btn btn-default">PORTFOLIO</button>
      <button type="button" class="btn btn-default">CONTACT</button>
  </div>
  </div>
</div>

css bootstrap

  • The nav-left must also have table-cell

  • I answered those times this same question, follow the link: http://answall.com/questions/153263/alinndo-bot%C3%B5es-no-navbar/153306#153306. I hope it helped.

1 answer

0

I usually use the attribute line-height, to this define a heightto the nav.

Thus : 

#nav{
  height:60px;
  background-color: #888888;}
#nav h3{
  float:left;
  margin-left: 3em;}
#nav-right{
  float:right;
  margin-right: 7px;
  line-height:60px;
  display: table-cell;}
.btn{
  height: 100%;}
<div class="fluid-container">
<div class="row navbar-fixed-top" id="nav">
  <div class="col-lg-6" id="nav-left">
    <h3>Tiago Fuelber's Portfolio</h3>
  </div>
  <div class="col-lg-3  col-lg-offset-2" id="nav-right">
      <button type="button" class="btn btn-default">ABOUT</button>
      <button type="button" class="btn btn-default">PORTFOLIO</button>
      <button type="button" class="btn btn-default">CONTACT</button>
  </div>
  </div>
</div>

  • Oxi...-1, where my testable and verifiable example may be wrong ?

  • I voted +1 because I consider your solution to be at least a good answer, I did not understand why someone should vote 'no'.

  • I don’t know, we’re all learning, I don’t mind getting negative, as long as it’s instructive...

Browser other questions tagged css bootstrap

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