兩個按鈕不會集中在simon遊戲中

我怎樣才能將「開始」和「嚴格」按鈕帶到相同的顯示級別（遊戲中心的控件）。並將文本居中。每當我減小顯示字體的大小時，圓圈（開始，嚴格）出現，反之亦然。我想讓這兩個按鈕與顯示器內嵌。他們是但他們不在同一層。並且按鈕內的文本不是垂直居中。我已經查找了所有的CSS規則來垂直對齊文本，找不到它..有人可以幫助這裏。由於鏈接筆：https://codepen.io/zentech/pen/XaYygR 兩個按鈕不會集中在simon遊戲中

<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; 
}

來源

2017-08-26 miatech

爲了讓您的按鈕排列，您需要設置vertical-align屬性。

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

對於要垂直居中的文字，你必須設置父元素的line-height財產。

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

此外，從您的.display類別中刪除padding-top: 20px。

Updated Codepen

來源

2017-08-27 00:04:26

兩個按鈕不會集中在simon遊戲中

回答

相關問題