如何使一个输入框在Ionic居中
How to make an input box centered in Ionic
我目前正在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
相关文章:
- 无法在Ionic select中预先选择最后一个选项
- 如何在Ionic Android中将Javascript注入到web视图中
- Ionic和angularjs嵌套步骤应用程序
- 如何在Ionic2测试版中包含Ionic.io服务
- 如何将窗体的子元素居中
- 如何在图片和边缘之间居中设置标签
- 如何在JavaScript图像滑块内居中对齐图像
- 鼠标悬停时如何居中放大背景图像
- 将高图饼图中的文本居中显示为响应
- Ionic-item在导航栏中进行双向数据绑定
- SqlStorage Ionic 2作为服务/提供程序
- Ionic V1.3-标签-带条件的徽章样式<离子选项卡>
- 为什么当我尝试在Ionic中使用列表时会出现此JavaScript错误
- using LocalStorage ionic 2
- 将数据传递给由服务创建的Ionic模态
- OSM-离线查询我的IONIC/CORDOVA项目
- 如何从mac上完全删除Ionic和Cordova安装
- ionic幻灯片框中的每张幻灯片都有不同的HTML文件
- 未在angularJS和Ionic中加载模板
- 如何使一个输入框在Ionic居中