Obtenir le titre et les boutons pour les contrôles au milieu de ce jeu "simon dit"

Je travaille sur un jeu Simon Says et je rencontre des problèmes pour placer le titre et les boutons du bas au milieu de la section des contrôles . J'ai essayé différents styles de CSS, mais les divs ne semblent pas bouger.Obtenir le titre et les boutons pour les contrôles au milieu de ce jeu "simon dit"

Spécialement, margin-top pour rapprocher les éléments du milieu. En ce moment, ils sont au bas de la page. Voici ce que j'ai jusqu'ici. Toute aide appréciée. Merci

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>

Source

2017-08-25 miatech

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>

Je ne mis de position:absolute.board-controls.

Et de définir .simonBoardposition:relative.

Je pense que ce n'est pas une bonne réponse.

Source

2017-08-25 15:02:31 zynkn

Je pense qu'il est bonne réponse. :) – Johannes

@Johannes Merci pour votre commentaire. – zynkn

Je voudrais l'approcher en ajoutant un autre div à l'intérieur de votre div-controls board-controls.

comme suit: -

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

puis ajoutez le code CSS suivant -

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

Cela rendra le nouveau contrôle menu div une section dans son propre droit et le positionnement absolu va essayer et tirez-le dans chaque direction, le faisant ainsi s'asseoir centralement à l'intérieur des commandes de la carte.

Vous pouvez ajuster la hauteur du menu en utilisant le pourcentage de hauteur dans le css fourni.

Voici un JSFiddle l'affichant fonctionnant.

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

Source

2017-08-25 15:05:22

Comme chaque div sont imbriquées, vous pouvez soit individuellement déclarer et style ou vous devez modifier le positionnement de .simonBoard-relative et à l'intérieur .board-controls à absolute puis en utilisant top, left et translate vous pouvez aligner .simonBoard au centre de même page et .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>

Source

2017-08-25 15:06:24 frnt

Tout d'abord, la question principale est que vous n'êtes pas les float nettoyez s que vous postulez aux quatre pad divs. C'est pourquoi lors de l'utilisation conteneurs flottants, il est toujours dit que nous devrions correctement les flotteurs clear. Le reste est facile.

Float clair en donnant clear: both au board-controls.
Maintenant, ajoutez position: relative-simonBoard et centrer le board-controls en utilisant ceci:
```
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
```
(la chose étrange est que la compensation flotte n'a pas d'importance maintenant que que vous utilisez absolutela position, mais vous devez être le faire)
centrent maintenant les divs à l'intérieur du board-controls en utilisant line-height si vous souhaitez que:
```
.board-controls > * { 
    line-height: 45px; 
} 
```

Voir la démo ci-dessous:

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>

Source

2017-08-25 15:13:52 kukkuz

Obtenir le titre et les boutons pour les contrôles au milieu de ce jeu "simon dit"

Répondre

Questions connexes