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

使用CSS和引导4对中输入

bootstrap-4 css html

0

SupremeA · 技术社区 · 7 年前

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

它现在正在这样渲染…

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

#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

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>