對齊四圓在CSS一個正方形內，HTML5

我開發一個西蒙說遊戲，並擁有所有的工作JavaScript等對齊四圓在CSS一個正方形內，HTML5

我遇到的主要問題是與CSS;當你點擊它一切正常，

這裏是什麼，我希望它看起來像一個模擬圖像：

enter image description here

更新仍然有alingment問題已經更新了我的CSS

enter image description here

CSS：

body { 
    background-color: #333; 
    color: #fff; 
} 

ul { 
    list-style: none; 
    margin: 0 0 20px 0; 
    padding: 0; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    padding: 3px; 
} 

.wrapper { 
    position: relative; 
    width: 640px; 
    margin: 0 auto; 
} 

.back { 
width:700px; 
height:700px; 
background-color:black; 
} 

.pad { 
    width: 200px; 
    height: 200px; 
    z-index: 1; 
    margin: 10px; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
    filter: alpha(opacity=60); 
    opacity: 0.6; 
} 

.shape1 { 
    position: absolute; 
    left: 0; 
    top: 50%; 
    margin-top: -300px; 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    border-radius: 50%; 
} 

.shape2 { 
    position: absolute; 
    left: 50%; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    border-radius: 50%; 
} 

.shape3 { 
    position: absolute; 
    left: 0; 
    right: 50%; 
    margin-right: -50px; 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    border-radius: 50%; 
} 

.shape4 { 
    position: absolute; 
    left: 0; 
    bottom: 50%; 
    margin-bottom: -50px; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    border-radius: 50%; 
} 

.level, .score { 
    width: 50%; 
    float: left; 
    text-align: center; 
} 

.sButton { 
    width: 30%; 
    margin: 0 auto; 
} 

.start { 
    width: 100%; 
    height: 30px; 
    text-align: center; 
}

HTML：

<body> 
    <div class="wrapper"> 
     <div class="back"> 
      <div class="pad shape1" data-pad="1"> 
       <audio preload="auto" class="sound1"> 
        <source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/> 
        <source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/> 
       </audio> 
      </div> 
      <div class="pad shape2" data-pad="2"> 
       <audio preload="auto" class="sound2"> 
        <source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/> 
        <source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/> 
       </audio> 
      </div> 
      <div class="pad shape3" data-pad="3"> 
       <audio preload="auto" class="sound3"> 
        <source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/> 
        <source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/> 
       </audio> 
      </div> 
      <div class="pad shape4" data-pad="4"> 
       <audio preload="auto" class="sound4"> 
        <source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/> 
        <source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/> 
       </audio> 
      </div> 
      <div class="break"></div> 
     </div> 

     <div class="level"> 
      <h2>Level: 1</h2> 
     </div> 
     <div class="score"> 
      <h2>Score: 0</h2> 
     </div> 

     <ul class="difficulty"> 

      <li> 
       <input type="radio" class="difOpt" name="difficulty" value="2">Easy 
      </li> 
      <li> 
       <input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal 
      </li> 
      <li> 
       <input type="radio" class="difOpt" name="difficulty" value="0.5">Hard 
      </li> 
      <li> 
       <input type="radio" class="difOpt" name="difficulty" value="0.25">Insane 
      </li> 
     </ul> 
     <div class="sButton"> 
      <button class="start">start</button> 
     </div> 
    </div> 
</body>

來源

2014-10-08 Jamiex304

要使它們成爲圓形，您可以簡單地添加一個「border-radius」，例如25到30像素。 – TylerH 2014-10-08 19:02:30

你會想給你的造型絕對位置，並使用「頂」，「左」，「右」和「底」的CSS屬性，像這樣：

.shape1 { 
    position: absolute; 
    left: 0; 
    top: 50%; 
    margin-top: -50px; 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    border-radius: 50%; 
}

請注意，margin-top用於略微偏移「top」屬性。邊界半徑將把它們變成圓圈。

來源

2014-10-08 19:04:37

我能夠讓他們旋轉，但我仍然遇到了黑盒子裏面的對齊問題，我在問題上面張貼了一張圖片，希望你能幫到忙嗎？ – Jamiex304 2014-10-08 19:26:55

我建議檢查Chrome開發人員工具或其他工具集中的這些元素。如果形狀應該在頂部，則給它'top：0'和'left：50％'。將它與我的.shape1（你因某種原因而改變）的例子進行比較。我認爲你在CSS定位時遇到了麻煩。我會推薦閱讀。 – 2014-10-08 19:44:19

我改變你的例子的原因是因爲這個圓圈完全消失了，我只剩下3個了？ – Jamiex304 2014-10-08 19:48:48

對齊四圓在CSS一個正方形內，HTML5

回答

相關問題