将标签和文本框与html居中对齐
[英]align label and textbox to the center in html
问题描述
我只需要将文本框和标签对齐到页面中心即可。 我无法得到这个。 每次其左对齐。 请需要建议的HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>ProjectID Creation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这是我在jsfiddle中的代码
2 个解决方案
解决方案1
1 已采纳 2017-01-17 09:59:34
您可以使用text-align:center和col-lg-offset-4和col-sm-offset-4尝试演示
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <div class="container" style="background-color:dodgerblue"> <h2><b>ProjectID Creation</b></h2> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-body text-center"> <div class="row"> <div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4"> <div class="form-group"> <label id="label" class="control-label" >UserID:</label> <input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required /> </div> </div> </div> <div class="row"> <div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4"> <div class="form-group"> <label id="label" class="control-label">ProjectID:</label> <input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required /> </div> </div> </div> <div class="temp123" style="margin-bottom:60px"> <button type="submit" class="btn btn-primary" ng-click="create()">Create</button> <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> </div> </div> </div> </div> </div>
解决方案2
0 2017-11-26 17:49:21
只是这个，
<style type="text/css">
.container{
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
演示在这里： https : //jsfiddle.net/durtpwvx/
无法使标签与Bootstrap 3中的文本框居中对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.