如何使一个输入框在Ionic居中

How to make an input box centered in Ionic

本文关键字:Ionic 居中 输入 何使一      更新时间:2023-09-26

我目前正在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,但我不认为这将是一个问题。提前感谢!

只需将center class添加到input

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>

我设法修复它…我只需要将元素设置为inline-block