所以我有两个按钮，我希望它们均匀地间隔开。我花了几个小时寻找解决方案，但找不到，所以我需要一些帮助。我的代码如下。
<!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>无论设备大小如何，我都希望两个按钮均匀间隔开。如果有人可以帮助我，那就太好了!
我试过使用 flex space-between、百分比、垂直高度/宽度。什么都行不通。
最佳答案
您可以忽略 hv-center 的样式并尝试这些 flexbox 属性:
#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>关于html - 如何均匀间隔div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57939757/