how to vertically align a button .btn (bootstrap) inside a fixed nav top menu? [duplicate]

1

#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>
    
asked by anonymous 30.09.2016 / 13:23

1 answer

0

I usually use the line-height attribute, so set a height to nav .

So:

#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>
    
30.09.2016 / 15:09