तो मेरे पास दो बटन हैं और मैं चाहता हूं कि वे समान रूप से अलग हों। मैंने समाधान की तलाश में घंटों बिताए हैं, और मुझे कोई नहीं मिला, इसलिए मुझे कुछ मदद चाहिए। मेरा कोड नीचे है।

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Moocraft's Tic-Tac-Toe</title>

  <style type="text/css">
    .hv-center {
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }
    
    .playerChoose {
      background: #0000ff;
      background: linear-gradient(#0000ff, #6b6bff);
      border-radius: 5px;
      padding: 8px 20px;
      color: #ffffff;
      display: inline-block;
      font: normal bold 24px/1 "Calibri", sans-serif;
      text-align: center;
      text-shadow: 1px 1px #000000;
    }
  </style>
</head>

<body style="text-align: center;">
  <div id="gameTypePick" style="" class="hv-center">
    <button id="randomPlayer" class="playerChoose">
			<h1>Random Person</h1>
		</button>
    <button id="friendPlayer" class="playerChoose">
			<h1>Friend</h1>
		</button>
  </div>
</body>

</html>

मैं चाहता हूं कि दो बटन समान रूप से अलग हों, इससे कोई फर्क नहीं पड़ता कि डिवाइस का आकार क्या है। अगर कोई मेरी मदद कर सकता है तो यह बहुत अच्छा होगा!

मैंने फ्लेक्स स्पेस-बीच, पर्सेंट, लंबवत ऊंचाई/चौड़ाई का उपयोग करने का प्रयास किया है। कुछ भी काम नहीं करता है।

4
Moo Craft 15 सितंबर 2019, 01:32

1 उत्तर

सबसे बढ़िया उत्तर

आप hv-center की शैली को नज़रअंदाज़ कर सकते हैं और ये आज़मा सकते हैं फ्लेक्सबॉक्स गुण:

#gameTypePick {
  display: flex;
  justify-content: space-evenly; /* Equal gap between elements */
  align-items: center; /* Vertical alignment */
  height: 100vh; /* You can use height: 100% of the parent container */ 
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Moocraft's Tic-Tac-Toe</title>

  <style type="text/css">
    .playerChoose {
      background: #0000ff;
      background: linear-gradient(#0000ff, #6b6bff);
      border-radius: 5px;
      padding: 8px 20px;
      color: #ffffff;
      display: inline-block;
      font: normal bold 24px/1 "Calibri", sans-serif;
      text-align: center;
      text-shadow: 1px 1px #000000;
    }
  </style>
</head>

<body style="text-align: center;">
  <div id="gameTypePick" style="" class="hv-center">
    <button id="randomPlayer" class="playerChoose"> 
      <h1>Random Person</h1>
    </button>
    <button id="friendPlayer" class="playerChoose">
      <h1>Friend</h1>
    </button>
  </div>
</body>

</html>
4
m4n0 14 सितंबर 2019, 22:38