Question

我正在寻找一种方法来集中我的输入标签，以便用户名和密码框都位于中心。

＆＃13;

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

＆＃13;

Answer 1

我认为它应该是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 2

试试这个：

p input{margin:0 auto;}

这应该将输入置于段落标记内。

干杯

Answer 3

您可以使用display flex来集中内容并使其具有响应性。

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

如何集中输入

3 个答案: