獲取標題和控制按鈕到這個「西蒙說」遊戲中間

Question

我正在一個西蒙說遊戲，我有問題把標題和按鈕從底部到控件部分的中間。我試過不同的css風格，但divs似乎沒有移動。

特別是，margin-top將元素更靠近中間。現在他們在頁面的底部。這是迄今爲止我所擁有的。任何幫助讚賞。由於

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; 
 
    position: relative; 
 
    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 { 
 
    display: inline-block; 
 
    border: 15px solid black; 
 
    height: 245px; 
 
    width: 245px; 
 
    border-radius: 150px; 
 
    background-color: white; 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    margin: auto; 
 
    -webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
/* -moz-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow:   -6px 8px 5px 0px rgba(50, 50, 50, 0.75); */ 
 
}

<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">07</div> 
 
     <div class="start">START</div> 
 
     <div class="strict">STRICT</div> 
 
     <div class="switch">ON/OFF</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

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; 
 
    position: relative; 
 
    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 { 
 
    display: inline-block; 
 
    border: 15px solid black; 
 
    height: 245px; 
 
    width: 245px; 
 
    border-radius: 150px; 
 
    background-color: white; 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    margin: auto; 
 
    -webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
/* -moz-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow:   -6px 8px 5px 0px rgba(50, 50, 50, 0.75); */ 
 
}

<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">07</div> 
 
     <div class="start">START</div> 
 
     <div class="strict">STRICT</div> 
 
     <div class="switch">ON/OFF</div> 
 
    </div> 
 
    </div> 
 
</div>

我沒設置.board-controls的position:absolute。

並設置.simonBoard的position:relative。

我認爲這不是很好的答案。

Answer 2

我會通過在您的board-controls div中添加另一個div來處理它。

如下 -

<div class="board-controls"> 
    <div class="control-menu"> 
    <div class="title">SIMON</div> 
    <div class="display">07</div> 
    <div class="start">START</div> 
    <div class="strict">STRICT</div> 
    <div class="switch">ON/OFF</div> 
    </div> 
</div> 

，然後添加下面的CSS -

.control-menu { 
    position:absolute; 
    text-align:center; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:50%; 
} 

這將使新的控制菜單DIV節在自己的權利，然後絕對定位將嘗試並沿每個方向拉動它，從而使其位於板控制器的中央。

您可以使用提供的CSS中的高度百分比來調整菜單的高度。

這是一個JSFiddle顯示它的工作。

https://jsfiddle.net/jvshu3du/1/

Answer 3

由於每個DIV嵌套，你可以單獨申報和風格，或者你有改變的.simonBoard定位relative和內部.board-controls到absolute然後使用top，left和translate你可以對齊.simonBoard到中心的頁面和相同的.board-controls。

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 { 
 
    border: solid 10px black; 
 
    width: 600px; 
 
    height: 600px; 
 
    border-radius: 600px; 
 
    box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75); 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, 0); 
 
} 
 

 
.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; 
 
    z-index: 10; 
 
    -webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
    /* -moz-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow:   -6px 8px 5px 0px rgba(50, 50, 50, 0.75); */ 
 
    position: absolute; 
 
    transform: translate(50%, 50%); 
 
} 
 

 
.title { 
 
    padding-top: 60px; 
 
}

<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">07</div> 
 
     <div class="start">START</div> 
 
     <div class="strict">STRICT</div> 
 
     <div class="switch">ON/OFF</div> 
 
    </div> 
 
</div> 
 
</div>

所有的

Answer 4

首先，主要的問題是你是不是清除的float s表示你申請到四個pad的div。這就是爲什麼當使用浮動容器時，總是說我們應該適當地使用浮動裝置。其餘的很容易。

1. 將clear: both設置爲board-controls以清除浮動。

2. 現在添加position: relative到simonBoard和使用居中board-controls這樣的：

   position: absolute; 
   top: 50%; 
   left: 50%; 
   transform: translate(-50%, -50%); 
   

   （古怪的是，清除浮動並不重要，雖然現在你正在使用absolute位置，但你應該正在做）

3. 現在使用line-height將div對齊board-controls如果您願意：

   .board-controls > * { 
       line-height: 45px; 
   } 
   

請參見下面的演示：

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; 
 
    border: solid 10px black; 
 
    width: 600px; 
 
    height: 600px; 
 
    border-radius: 600px; 
 
    box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75); 
 
    position: relative; 
 
} 
 

 
.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; 
 
    z-index: 10; 
 
    clear: both; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); 
 
} 
 
.board-controls > * { 
 
    line-height: 45px; 
 
}

<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">07</div> 
 
     <div class="start">START</div> 
 
     <div class="strict">STRICT</div> 
 
     <div class="switch">ON/OFF</div> 
 
    </div> 
 
    </div> 
 
</div>