Jeff Burghess Jeff Burghess - 5 months ago 8
CSS Question

Why are my buttons floating above the containing element? Is it bootstrap related?

I suspect it's bootstrap because if I don't include the bootstrap library, the code works fine. Any ideas on what it could be? I've included an example here to demonstrate the effect.



#main-pane {
position: relative;
margin-top: 100px;
margin-bottom: 180px;

}

#lower-bar {
background-color: #0F6292;
height: 80px;
position: relative;

}
.center-it {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class ="row" id = "main-pane">
<div class= 'col-md-6 col-md-offset-1'>
good dreams pupper
</div>
</div>

<section id = 'lower-bar'>
<div class = 'row'>
<div class = 'col-md-12'>
<div class = 'center-it'>

<input type="button" id='btn-1' value ="Button 1">
<input type="button" id='btn-2' value ="Button 2">
<input type="button" id="btn-3" value="Button 3">
<input type="button" id='btn-4' value ="Button 4">
<input type="button" id="btn-5" value="Button 5">
</div>

</div>
</div>
</section>




Answer

Replace: transform: translate(-50%,-50%); in your .center-it css by transform: translate(-50%,50%);

#main-pane {
  position: relative;
  margin-top: 100px;
  margin-bottom: 180px;
  
}

#lower-bar {
  background-color: #0F6292;
  height: 80px;
  position: relative;
  
}
.center-it {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,50%);

  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class ="row" id = "main-pane">
    <div class= 'col-md-6 col-md-offset-1'>
      good dreams pupper
      </div>
</div>

<section id = 'lower-bar'>
  <div class = 'row'>
    <div class = 'col-md-12'>
      <div class = 'center-it'>
    
     <input type="button" id='btn-1' value ="Button 1">
     <input type="button" id='btn-2' value ="Button 2">
     <input type="button" id="btn-3" value="Button 3">
     <input type="button" id='btn-4' value ="Button 4">
     <input type="button" id="btn-5" value="Button 5">
     </div>

    </div>
  </div>
</section>