この "simon says"ゲームの途中でコントロールのタイトルとボタンを取得する

Question

私はSimon Saysゲームで作業していますが、タイトルとボタンをコントロールセクションの中央に置くことに問題があります。私はさまざまなCSSスタイルを試しましたが、divは動いていないようです。

特に、要素を中央に近づけるにはmargin-topです。今はページの一番下にあります。ここに私がこれまで持っているものがあります。どんな助けもありがたい。私は.board-controlsさんposition:absolute設定しなかったおかげで

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>

。

.simonBoardのposition:relativeと設定します。

良い答えではないと思います。

Answer 2

私はあなたのボードコントロールの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要素は、あなたが個別ことを宣言し、スタイルができネストされているか、relativeに.simonBoardの位置を変更する必要がありますし、.board-controlsabsoluteに、その後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

まず、主な問題は、あなたが4つのpadのdiv要素に適用されているfloat秒をクリアしはないです。そのため、フローティングコンテナを使用している場合は、常に浮き彫りをclearする必要があります。残りは簡単です。 board-controlsへclear: bothを与えることによって

1. クリアフロート。（奇妙な事はあなたがabsolute位置を使用しているとして、フロートをクリアするのに、今は関係ないことですが、あなたがすべき

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

   ：

2. は今、これを使用してsimonBoard、センターにboard-controlsをposition: relativeを追加しますそれをやっている）

3. board-controlsの中のdivを中心に、line-heightを使用して調整します。

   .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>