javascript - 如何使输入框在 Ionic 中居中

Question

我目前正在用 Ionic 编写一个应用程序，您可以在其中输入一个数字并选择一种语言，它会以另一种语言打印出该数字。我已经完成了所有工作，现在我正在设计它。除了我的输入框，我已经把所有的都居中了。我研究了很多，但找不到任何相同的东西。这是我的一些 HTML:

  <ion-content class="padding" id="ion-content">
<div class="container-fluid">
<div class="row  center">
<div class="col"><h1>Please Enter Your Phone Number:</h1></div>
</div>
<div class="row">
  <div class="col col-100 center" style="display:block;">
<input type="tel" ng-model="number" class="borders" name="number">
</div>
</div>
<div class="row center">
  <div class="col">
  <select id="select" ng-model="language">
    <option value="French">FRENCH</option>
    <option value="German">GERMAN</option>
    <option value="English">ENGLISH</option>
    <option value="Mandarin">MANDARIN</option>
    <option value="Swedish">SWEDISH</option>
    <option value="Latin">LATIN</option>
    <option value="Bulgarian">BULGARIAN</option>
    <option value="Turkish">TURKISH</option>
  </select>
</div>
</div>
<div class="row center"><div class="col">
  <button class="Nextbutton" ng-click="doit(number,language)">
<h1>TRANSLATE</h1></button>
</div>

(这就是与我的问题相关的所有内容)这是我的 CSS:

    body{

    }
    .center {
    text-align:center;
    }

    .firstinput {

    }

    h1 {
    font-family:Impact, Charcoal, sans-serif;
    font-variant: small-caps;
    }
    #change {
    font-family:Impact, Charcoal, sans-serif;
    font-variant: small-caps;
    font-size: 20px;
    }

    .borders {
    border-radius: 10px;
    margin:10px;
    font-family:Impact, Charcoal, sans-serif;
    border-color:black;

    }
select {
  margin:10px;
  font-family:Impact, Charcoal, sans-serif;
  font-variant: small-caps;
  font-size: 15px;
}
input-label {
  width:30%;
}

还有一些 Javascript，但我认为这不会成为问题。提前致谢!

Answer 1

只需将您的中心类添加到您的输入中

body{

    }
    .center {
    text-align:center;
    }

    .firstinput {

    }

    h1 {
    font-family:Impact, Charcoal, sans-serif;
    font-variant: small-caps;
    }
    #change {
    font-family:Impact, Charcoal, sans-serif;
    font-variant: small-caps;
    font-size: 20px;
    }

    .borders {
    border-radius: 10px;
    margin:10px;
    font-family:Impact, Charcoal, sans-serif;
    border-color:black;

    }
select {
  margin:10px;
  font-family:Impact, Charcoal, sans-serif;
  font-variant: small-caps;
  font-size: 15px;
}
input-label {
  width:30%;
}

<div class="container-fluid">
<div class="row  center">
<div class="col"><h1>Please Enter Your Phone Number:</h1></div>
</div>
<div class="row">
  <div class="col col-100 center" style="display:block;">
<input type="tel" ng-model="number" class="borders center" name="number">
</div>
</div>
<div class="row center">
  <div class="col">
  <select id="select" ng-model="language">
    <option value="French">FRENCH</option>
    <option value="German">GERMAN</option>
    <option value="English">ENGLISH</option>
    <option value="Mandarin">MANDARIN</option>
    <option value="Swedish">SWEDISH</option>
    <option value="Latin">LATIN</option>
    <option value="Bulgarian">BULGARIAN</option>
    <option value="Turkish">TURKISH</option>
  </select>
</div>
</div>
<div class="row center"><div class="col">
  <button class="Nextbutton" ng-click="doit(number,language)">
<h1>TRANSLATE</h1></button>
</div>