获取标题和控制按钮到这个“西蒙说”游戏中间

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>