我想将表单与 div.login__box 中的标签居中对齐
我使用 bootstrap 3.3.7
这就是我想要的
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="login">логин</label>
<div class="col-sm-8">
<input type="login" class="form-control" id="login" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd" >пароль</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="pwd" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="btn" />
<div class="col-sm-4">
<input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет">
</div>
</div>
</form>
我当前的标记在这里 codepen.io
最佳答案
对您的 html 进行了细微的更改:
<head>
<meta charset="UTF-8">
<title>#</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="jumbotron vertical-center">
<div class="container">
<div class="row">
<div class="col-md-4 about__box">
<div class="about__inner">
<div class="about__content">
<div class="about__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="about__desc">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</div>
</div>
<div class="col-md-8 login__box">
<div class="login__inner">
<div class="text-center login__header">
Authorization
</div>
<div class="container login__container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-2" for="login">log in</label>
<div class="col-sm-6">
<input type="login" class="form-control" id="login" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-2" for="pwd" >password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="pwd" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-2" for="btn" ></label>
<div class="col-sm-4">
<input type="button" class="form-control login__btn-login" id="btn" value="submit">
</div>
</div>
</form>
<div class="control-label col-sm-2"></div>
<div class="col-sm-8 login__desc">
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<img src="" class="pull-right img-responsive login__img_people">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
将此添加到您的 CSS:
.form-horizontal .control-label{
margin-right:0;
}
同时附上 codepen 链接:
http://codepen.io/Sky-123/pen/WGOOqq?editors=1100
希望这对您有所帮助!
关于html - 如何将表单与 div 内的标签居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39741769/