CODEWITHSUNDEEP
htmltwitter-bootstrap
Moogical Cow
Moogical Cow

Reputation: 1

How to center input

I am looking for a way to center my input tab so that username and password box are both in the center.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><img src="http://i.imgur.com/wqfHrmJ.png?1" style="display: block;
    margin-left: auto; margin-right: auto;" />
<div class="container-fluid" ng-controller="grocceryCtrl">
  <font color='#D68910'>
    <h1 class="header"> Grocery Store </h1>
    <div ng-show="!login">
      <p><input type="text" placeholder="Enter Username" ng-model="username" color="red" class="form-control" style="width: 500px;" /></p>
      <p><input type="password" placeholder="Enter Password" ng-model="password" class="form-control" style="width: 500px;" /></p>
      <button class="btn btn-primary" ng-click="checkLogin()">Login</button>
    </div>

Upvotes: 0

Views: 104

Answers (3)

user7843382
user7843382

Reputation:

You can use display flex to centre your content and also make it responsive. 

<div class="container">
    <div class="inputcontainer">

     YOUR INPUT HERE

   </div>
</div>

Link CSS to document and user

 .inputcontainer {

       display: felx;
 }

You can read more on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Ilove112
Ilove112

Reputation: 94

I think it should be p input{ margin:0 auto; display: block; }

p input{ margin:0 auto; display: block; }
<img src="http://i.imgur.com/wqfHrmJ.png?1" style= "display: block;
margin-left: auto; margin-right: auto;"/>
<div class="container-fluid" ng-controller="grocceryCtrl">
    <font color='#D68910'>
    <h1 class="header"> Grocery Store </h1>
    <div ng-show="!login">
    <p><input type="text" placeholder="Enter Username" ng-model="username" color="red" class="form-control" style="width: 500px;" /></p>
    <p><input type="password" placeholder="Enter Password" ng-model="password" class="form-control" style="width: 500px;" /></p>
    <button class="btn btn-primary" ng-click = "checkLogin()">Login</button>
    </div>

Hope you get your result~

Upvotes: 2

Syfer
Syfer

Reputation: 4479

Try this:

p input{margin:0 auto;}

That should centre the inputs inside the paragraph tags.

Cheers

Upvotes: 0

Related Questions