gpt4 book ai didi

html - 如何均匀间隔div

转载 作者:太空狗 更新时间:2023-10-29 12:39:09 24 4
gpt4 key购买 nike

所以我有两个按钮,我希望它们间隔均匀。我花了几个小时寻找解决方案,但找不到,所以我需要一些帮助。我的代码如下。

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com