我想将表格与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/