如何在表单html中居中放置输入按钮

Question

我有多个位于表单中的输入按钮，这些输入不在页面的中心。

目前它只显示一行输入div，但我希望它能在每侧填充大约20px的页宽空白，并根据浏览器屏幕大小进行调整，我该怎么做？感谢你的回答，谢谢！

.main_buttons {
width: 100%;
text-align: center;
}
.btn-select {
margin: 4px;
background-color: #7a7979;
border-radius: 4px;
overflow: auto;
width: 250px;
height: 200px;
margin-right: 5px;
}

<div class="container main_buttons">
<div class="row">
<div class="col-12">
<form class="select_form" method="POST">
{% csrf_token %}

<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="0"><span>sydney</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="1"><span>tokyo</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="2"><span>london</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="3"><span>new york</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="4"><span>paris</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="5"><span>madrid</span></input>
</label>
</div>


<button type="submit" class="btn btn-secondary city_submit_button">SUBMIT</button>
</form>
</div>
</div>
</div>

Answer 1

一种解决方案是使用position属性。我将标签和输入字段封装在名为wrapper的div容器中。然后我将display:style添加到标签中。

.main_buttons {
width: 100%;
text-align: center;
}
.wrapper {
position: relative;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
label {
display:block;
}
.btn-select {
margin:4px;
background-color:#7a7979;
border-radius:4px;
overflow:auto;
width: 250px;
height: 200px;
margin-right: 5px;

}

<div class="container main_buttons">
<div class="row">
<div class="col-12">
<form class="select_form" method="POST">
{% csrf_token %}                
<div class="btn-select wrapper">
<div class="inner">                          
<input class="" type="checkbox" name="city_select" value="0">
<label class=""><span>sydney</span></label>
</div>
</div>

<div class="btn-select wrapper">
<div class="inner">                          
<input class="" type="checkbox" name="city_select" value="0">
<label class=""><span>tokyo</span></label>
</div>
</div>              
<div class="btn-select wrapper">
<div class="inner">                          
<input class="" type="checkbox" name="city_select" value="0">
<label class=""><span>london</span></label>
</div>
</div>

<div class="btn-select wrapper">
<div class="inner">                          
<input class="" type="checkbox" name="city_select" value="0">
<label class=""><span>new york</span></label>
</div>
</div>
<div class="btn-select wrapper">
<div class="inner">                          
<input class="" type="checkbox" name="city_select" value="0">
<label class=""><span>paris</span></label>
</div>
</div>
<div class="btn-select wrapper">
<div class="inner">                          
<input class="" type="checkbox" name="city_select" value="0">
<label class=""><span>madird</span></label>
</div>
</div>               

<button type="submit" class="btn btn-secondary city_submit_button">SUBMIT</button>

</form>
</div>

</div>
</div>