CODEWITHSUNDEEP
htmlcss
beginner
beginner

Reputation: 303

align label and textbox to the center in html

I just need to align the textbox and label to the center of the page. I am unable to get this. Every time its left aligned. Please need suggestions Html code:

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

Here is my code in jsfiddle

Upvotes: 0

Views: 3545

Answers (2)

Aravin
Aravin

Reputation: 7067

Just this,

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

Demo here: https://jsfiddle.net/durtpwvx/

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8409

You can use text-align:center and col-lg-offset-4 and col-sm-offset-4 try the demo 

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

Upvotes: 1

Related Questions