two buttons will not center in simon game

Question

how can I bring "start" and "strict" buttons up to same level of display (controls in center of game). and center the text. Whenever I decrease the size of display font the circles (start, strict) come up, and vise-versa. I want the two buttons inline with the display. They are but they are not at same level. And the text inside the buttons is not centered vertically. I've looked all over for a css rule to align text vertically, can't find it.. can someone help here. Thanks link to pen: https://codepen.io/zentech/pen/XaYygR

<div class="container">
  <div class="header">
    <h1>SIMON</h1>
  </div>
  <div class="simonBoard">
      <div class="pad pad-green"></div>
      <div class="pad pad-red"></div>
      <div class="pad pad-yellow"></div>
      <div class="pad pad-blue"></div>   
    <div class="board-controls">
      <div class="title">SIMON</div>
      <div class="display inline">00</div>
      <div class="start inline">START</div>
      <div class="strict inline">STRICT</div>
      <div class="switch">
        <h3 class="inline">ON</h3>
        <div class="outter-switch inline"><div class="inner-switch"></div></div>
        <h3 class="inline">OFF</h3>
      </div>
    </div>
</div>
</div>

style

body {
  background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/purty_wood.png");
  font-family: 'Righteous', cursive;
  color: black;
}

.container {
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 70px;
}

.simonBoard {
  margin: 0 auto;
/*   margin-top: 100px; */
  border: solid 10px black;
  width: 600px;
  height: 600px;
  border-radius: 600px;
  box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75);
}

.pad {
  margin: 0;
  float: left;
  position: relative;
  width: 290px;
  height: 290px;
  z-index: 8;
  border: 5px solid black;
}

.pad-green {
    background-color:#0a0;
    -moz-border-radius: 300px 0 0 0;
    border-radius: 300px 0 0 0;    
}

.pad-red {
  background-color: red;
  -moz-border-radius: 0 300px 0 0;
  border-radius: 0 300px 0 0;
}

.pad-yellow {
  background-color: yellow;
  -moz-border-radius: 0 0 0 300px;
  border-radius: 0 0 0 300px;
}

.pad-blue {
  background-color: blue;
  -moz-border-radius: 0 0 300px 0;
  border-radius: 0 0 300px 0;
}

.board-controls {
  border: 15px solid black;
  height: 245px;
  width: 245px;
  border-radius: 150px;
  background-color: white;
  clear: both;
  position: absolute;
  z-index: 10;
  margin-top: 160px;
  margin-left: 160px;
  -webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
}

.title {
  font-size: 45px;
  margin-top: 30px;
  font-weight: bold;
}

.inline {
  display: inline-block;
}

.display {
  margin-left: 0px;
  margin-top: 20px;
  border: solid 2px black;
  border-radius: 10px;
  color: white;
  width: 60px;
  height: 45px;
  font-size: 37px;
  background-color: #342626;
}

.start {
  text-align: center;
  margin: 0;
  margin-left: 20px;
  border: solid 3px black;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  color: black;
  background-color: darkred;
}

 .strict {
  text-align: center;
  margin: 0px;
  margin-left: 20px;
  border: solid 3px black;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  color: black;
  background-color: yellow;
}

.inner-switch {
  background-color: gray;
  width: 30px;
  height: 25px;
  position: relative !important;
}

.outter-switch {
  margin-top: 20px;
  border: solid 2px black;
  width: 60px;
  height: 25px;
  background-color: black;  
}

Answer 1

In order for your buttons to be aligned, you need to set the vertical-align property.

.inline {
    display: inline-block;
    vertical-align: middle;
}

For the text to be vertically centered, you have to set the line-height property of the parent element.

.start, .strict {
    line-height: 50px;
}

Also, remove the padding-top: 20px from your .display class.

Updated Codepen