ラベルとテキストボックスをhtmlの中心に揃えます。

テキストボックスとラベルをページの中央に揃えるだけです。私はこれを得ることができません。左揃えになるたびに。提案 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

出典

2017-01-17 beginner

あなたは、ブートストラップクラス '-center'を合わせ、あなたはそのクラスを使用する必要がありますがあり？：https://jsfiddle.net/0go275h1/ – Banzay

での私のコードは、あなたがtext-align:centerとcol-lg-offset-4を使用することができますし、COL-SM-オフセット-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>

デモを試しています

出典

2017-01-17 09:59:34

必要なもの、それです。 –

@AbhishekPandey yes course 'text-center'私はそれを変更しました –

@beginner親divの2つのクラス "form-group"を使用したのはなぜでしょうか？つまり、colのクラスとchild divの隣に、ちょうど子divそれは完全に動作します。 – sanjay

ちょうど、

ここ

<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/

出典

2017-11-26 17:49:21 Aravin

ラベルとテキストボックスをhtmlの中心に揃えます。

答えて

関連する問題