Question

如何在Bootstrap中垂直对齐输入元素？我希望将输入放在容器的垂直中心。

HTML

    <form class="form-horizontal" role="form">
  <div class="form-group">
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
        </div>
    </div>

此外，如果缺少某些信息，我将非常乐意提供相关信息。

Answer 1

您在此处提供的答案How to vertically align label and input in Bootstrap 3?

使用http://getbootstrap.com/css/#forms-horizontal

<form class="form-horizontal">

或者您可以使用

<div class="parent">
    <div class="child">
    </div>
</div>

// CSS

.parent{ position: relative }
.child { position: absolute;
         top: 50%;
         transform: translateY(-50%); }

Answer 2

.container{
  display: flex;
  align-items: center;
}

#form{
    width:100%;
}

我试着让 https://jsfiddle.net/y5ne8gg9/

这就像你想要的那样？

Answer 3

这是一个类似的形式：https://jsfiddle.net/UXEngineer/qtas70qy/

<h1>Login Portal</h1>
<hr />
<p>Enter your Username/Email and Password to log in to your account.</p>
<div class="clearfix"></div>
<form name="LoginForm" runat="server" action="~/Account/Default.aspx">
  <div class="col-md-12 col-sm-12">
    <div class="input-group">
      <span class="input-group-addon" id="UserAccountEmail-addon"><i class="fa fa-users"></i></span>
      <input type="email" id="UserAccountEmailtxt" name="UserAccountEmailAddress" class="form-control" maxlength="250" placeholder="Username or Email" required="required" aria-describedby="UserAccountEmail" />
    </div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-eight-px"></div>
  </div>
  <div class="col-md-12 col-sm-12">
    <div class="input-group">
      <span class="input-group-addon" id="AccountPassword-addon"><i class="fa fa-unlock-alt padding-left-and-right-three-px"></i></span>
      <input type="email" id="AccountPasswordtxt" name="UserAccountPassword" class="form-control" maxlength="50" placeholder="Password" required="required" aria-describedby="AccountPassword" />
    </div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-eight-px"></div>
  </div>
  <div class="center-text">
    <input type="checkbox" id="RememberUsercb" name="RememberMe" class="checkbox-inline" />
    <label for="RememberUsercb" class="mouse-pointer">Remember me</label>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-five-px"></div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <hr />
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-five-px"></div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="center-text">
        <button type="submit" id="UserLogInbtn" class="btn btn-success" title="Login In" name="LogIn">Submit Form</button>
    </div>
  </div>
</form>

这是css：

.padding-top-five-px {
  padding-top: 5px;
}

.padding-top-eight-px {
  padding-top: 8px;
}

.center-text { text-align: center; }

.padding-left-and-right-three-px {
  padding-left: 3px padding-right: 3px;
}

如何在Bootstrap中垂直对齐输入元素？

3 个答案: