代码之家  ›  专栏  ›  技术社区  ›  SupremeA

使用CSS和引导4对中输入

  •  0
  • SupremeA  · 技术社区  · 7 年前

    我有一张表格要放在页面中央。标签居中,但出于某种原因,我无法将输入与表单控件类居中。

    它现在正在这样渲染…

    [编辑:The display: block; 内部窗体控件导致此问题。不知道为什么,我怎么能禁用它]

    enter image description here

    #centered {
      text-align: center;
    }
    <div id='centered'>
              <span class="form-group">
                <h5 class="label">Email</h5>
                <input class="form-control" id="ex2" type="text">
              </span>
            <span class="form-group">
              <h5 class="label">Name</h5>
              <input class="form-control" id="ex2" type="text">
            </span>
            <span class="form-group">
              <h5 class="label">Create A Password</h5>
              <input class="form-control" id="ex2" type="text">
            </span>
            <span class="form-group">
              <h5 class="label">Confirm Password</h5>
              <input class="form-control" id="ex2" type="text">
            </span>
            <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
      </div>
    2 回复  |  直到 7 年前
        1
  •  1
  •   Ryuuks    7 年前

    你可以尝试改变 display 全部财产 form-control 在那个分区内:

     #centered .form-control {
      display: inline;
    } 
    
        2
  •  -1
  •   kiranvj    7 年前

    使用该类 mx-auto

    /* CSS used here will be applied after bootstrap.css */
    #centered {
      text-align: center;
      width:100px;
    }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <div id='centered' class="mx-auto">
              <span class="form-group">
                <h5 class="label">Email</h5>
                <input class="form-control" id="ex2" type="text">
              </span>
            <span class="form-group">
              <h5 class="label">Name</h5>
              <input class="form-control" id="ex2" type="text">
            </span>
            <span class="form-group">
              <h5 class="label">Create A Password</h5>
              <input class="form-control" id="ex2" type="text">
            </span>
            <span class="form-group">
              <h5 class="label">Confirm Password</h5>
              <input class="form-control" id="ex2" type="text">
            </span>
            <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
      </div>
    推荐文章