时间戳

首页 > 解决方案 > 如何在表单html中居中输入按钮

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

问题描述

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

目前它只显示一行输入 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>

标签： htmlcss

解决方案

一种解决方案是使用位置属性。我将标签和输入字段包装在名为 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>

推荐阅读