我需要在 div 的中心放置一個按鈕，但我也需要這些按鈕之間的空間，這是我需要的一個例子 
這里有我所擁有的 
演示
.panelRegister {
background-color: white;
display: none;
position: absolute;
left: 22%;
width: 1120px;
height: 806px;
}
.center {
display: flex;
justify-content: center;
flex-direction: column;
}
.panelRegister .btn_styleRegister {
background-color: RGB(41,127,182);
color: white;
border: none;
height: 50px;
width: 180px;
text-align: center;
font-size: 16px;
padding: 4px 10px;
cursor: pointer;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Register/stageRegister.css" type="text/css"/>
</head>
<body>
<div id="click_Register" class="panelRegister">
<h1 style="color: black; margin-left: 20px;">Register</h1>
<div class="center">
<button class="btn_Register btn_styleRegister">Manager/Doctor</button>
<button class=" btn_styleRegister">Family/Resident</button>
</div>
</div>
</body>
</html>所以我需要幫助我嘗試使用 justify-content:space between 按鈕之間的空間，但它在按鈕之間放置了一個很大的空間
uj5u.com熱心網友回復：
使用 amargin作為按鈕
下面是一個例子：
* {
margin: 0;
padding: 0;
}
#box {
height: 250px;
width: 250px;
border: 1px solid;
/* Flexbox */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column
}
button {
margin: 15px;
}<div id="box">
<button>Button One</button>
<button>Button Two</button>
</div>在你的代碼中它會是這樣的（我也洗掉了display: none;所以你可以看到它）：
.panelRegister {
background-color: white;
position: absolute;
left: 22%;
width: 1120px;
height: 806px;
}
.center {
display: flex;
justify-content: center;
flex-direction: column;
}
.panelRegister .btn_styleRegister {
background-color: RGB(41,127,182);
color: white;
border: none;
height: 50px;
width: 180px;
text-align: center;
font-size: 16px;
padding: 4px 10px;
cursor: pointer;
text-decoration: none;
}
button {
margin: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Register/stageRegister.css" type="text/css"/>
</head>
<body>
<div id="click_Register" class="panelRegister">
<h1 style="color: black; margin-left: 20px;">Register</h1>
<div class="center">
<button class="btn_Register btn_styleRegister">Manager/Doctor</button>
<button class=" btn_styleRegister">Family/Resident</button>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
使用 Bootstrap 類而不是 css，它會自動添加空格、顏色、大小等。
<div class="row">
<div class="col-md-4">
<button class="btn_Register btn_styleRegister btn-sm">Manager/Doctor</button>
</div>
<div class="col-md-4">
<button class=" btn_styleRegister btn-sm">Family/Resident</button>
</div>
</div>
uj5u.com熱心網友回復：
.panelRegister {
background-color: white;
position: absolute;
left: 22%;
width: 1120px;
height: 806px;
}
.center {
display: flex;
justify-content: center;
flex-direction: column;
}
.panelRegister .btn_styleRegister {
background-color: RGB(41,127,182);
color: white;
border: none;
height: 50px;
width: 180px;
text-align: center;
font-size: 16px;
padding: 4px 10px;
cursor: pointer;
text-decoration: none;
border-radius:3px;
}
.btn_styleRegister{
margin-bottom: 30px;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Register/stageRegister.css" type="text/css"/>
</head>
<body>
<div id="click_Register" class="panelRegister">
<h1 style="color: black; margin-left: 20px;">Register</h1>
<div class="center">
<button class="btn_Register btn_styleRegister">Manager/Doctor</button>
<button class=" btn_styleRegister">Family/Resident</button>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358480.html