如何中心輸入

Question

我正在尋找一種方法來居中我的輸入選項卡，以便用戶名和密碼框都在中心。

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

Answer 1

試試這個：

p input{margin:0 auto;}

這應該居中的段落標記內的輸入。

乾杯

Answer 2

我覺得應該是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>

希望你得到你的結果〜

Answer 3

您可以使用顯示器撓性居中您的內容，也使它響應。

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

    YOUR INPUT HERE 

    </div> 
</div> 

鏈接CSS來記錄和用戶

.inputcontainer { 

     display: felx; 
} 

你可以閱讀更多關於：https://css-tricks.com/snippets/css/a-guide-to-flexbox/