2つのボタンはサイモンゲームの中心にはありません

Question

「スタート」ボタンと「厳密」ボタンを同じレベルのディスプレイ（ゲームの中心にあるコントロール）まで持っていく方法を教えてください。テキストを中央に配置します。表示フォントのサイズを小さくするたびに、サークル（開始、厳密）が表示され、逆も同様です。私は2つのボタンをディスプレイとインラインにしたい。彼らはそうですが、彼らは同じレベルではありません。また、ボタン内部のテキストは垂直方向にセンタリングされていません。私はテキストを縦に整列させるためのCSS規則を全部見てきましたが、見つけられません。ペンのおかげ リンク：あなたのボタンを整列させるようにするためには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> 

スタイル

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

、あなたはvertical-alignプロパティを設定する必要があります。垂直方向に中央揃えするテキストについては

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

、あなたは親要素のline-heightプロパティを設定する必要があります。

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

また、あなたの.displayクラスからpadding-top: 20pxを削除します。

Updated Codepen