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

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

即可

＆＃13;

require(data.table) # v1.9.8+
# convert to data.tables, and Date column to Date class.
setDT(df1)[, Date := as.Date(Date, format = "%m-%d-%Y")]
setDT(df2)[, Date := as.Date(Date, format = "%m-%d-%Y")]

df1[df2, on = .(Airlines, HeadQ, Date < Date), # find matching rows based on condition
      Cost_Index := 0L]                        # update column with 0 for those rows

df1
#    Airlines HeadQ       Date Cost_Index
# 1: American   PHX 2016-07-31        220
# 2: American   ATL 2016-08-31          0
# 3: American   ATL 2016-10-31        150
# 4:    Delta   ATL 2016-10-31        180

＆＃13;

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%;
}

＆＃13;

Answer 2

我设法修复它......我只需要将元素设为内联块

如何使输入框以离子为中心

2 个答案: