I want the login and register button in right,and Search button in Center, I searched alot but didn't get any solution.
我想要右边的登录和注册按钮，中心的搜索按钮，我搜索了很多，但没有得到任何解决方案。
And also how can I align text area in a proper position.
还有如何将文本区域对齐到合适的位置。
Here is my html code:
这是我的HTML代码：
<body ng-app="starter">
<ion-pane style = "background-color:#4992E2;">
<ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
<h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
</ion-header-bar>
<ion-content >
<div class = "row center">
<div class="col">
<button class="button button-small button-light" >
Login!
</button>
<button class="button button-small button-light">
Register Here!
</button>
</div>
</div>
<div class="item-input-inset">
<h4>Date</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Suburb</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Clinic</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<button class=" center button button-small button-light">
Search
</button>
</ion-content>
</ion-pane>
</body>
I know in the bootstrap, but I am new to ionic, please tell me how can I do this.
我知道在引导程序中，但我是离子的新手，请告诉我我该怎么做。
7 个解决方案
#1
29
Css is going to work in same manner i assume.
Css将以我假设的相同方式工作。
You can center the content with something like this :
您可以使用以下内容对内容进行集中：
.center{
text-align:center;
}
Update
更新
To adjust the width in proper manner, modify your DOM as below :
要以适当的方式调整宽度，请修改DOM，如下所示：
<div class="item-input-inset">
<label class="item-input-wrapper"> Date
<input type="text" placeholder="Text Area" />
</label>
</div>
<div class="item-input-inset">
<label class="item-input-wrapper"> Suburb
<input type="text" placeholder="Text Area" />
</label>
</div>
CSS
CSS
label {
display:inline-block;
border:1px solid red;
width:100%;
font-weight:bold;
}
input{
float:right; /* shift to right for alignment*/
width:80% /* set a width, you can use max-width to limit this as well*/
}
演示
final update
最后更新
If you don't plan to modify existing HTML (one in your question originally), below css would make me your best friend!! :)
如果你不打算修改现有的HTML（原来你的问题中有一个），下面的css会让我成为你最好的朋友！ :)
html, body, .con {
height:100%;
margin:0;
padding:0;
}
.item-input-inset {
display:inline-block;
width:100%;
font-weight:bold;
}
.item-input-inset > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
演示
#2
89
You should put the button inside a div, and in the div you should be able to use the classes:
text-left, text-center and text-right.
你应该把按钮放在一个div中，在div中你应该能够使用这些类：text-left，text-center和text-right。
for example:
例如：
<div class="row">
<div class="col text-center">
<button class="button button-small button-light">Search</button>
</div>
</div>
And about the "textarea" position:
关于“textarea”的立场：
<div class="list">
<label class="item item-input">
<span class="input-label">Date</span>
<input type="text" placeholder="Text Area">
</label>
Demo using your code:
http://codepen.io/douglask/pen/zxXvYY
使用您的代码演示：http：//codepen.io/douglask/pen/zxXvYY
#3
12
To use center alignment in ionic app code itself, you can use the following code:
要在离子应用程序代码本身中使用中心对齐，您可以使用以下代码：
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
To use right alignment in ionic app code itself, you can use the following code:
要在离子应用程序代码本身中使用右对齐，您可以使用以下代码：
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
#4
0
And if we want to align a checkbox to the right, we can use item-end.
如果我们想要将复选框对齐，我们可以使用item-end。
<ion-checkbox checked="true" item-end></ion-checkbox>
#5
0
Another Ionic way. Using this ion-buttons tag, and the right keyword puts all the buttons in this group to the right. I made some custom toggle buttons that i wanted on one line, but the group to be right justified.
另一种离子方式。使用此ion-buttons标签和正确的关键字将此组中的所有按钮放在右侧。我在一条线上制作了一些我想要的自定义切换按钮，但该组是正确的。
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>#6
0
I Found the esiest soltuion just wrap the button with div and put text-center align-items-center in it like this :
我找到了esiest soltuion只是用div包装按钮并将text-center align-items-center放在其中，如下所示：
<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
#7
-3
center tag aligns the buttons within it as expected:
中心标记按预期对齐其中的按钮：
<ion-footer>
<ion-toolbar>
<center>
<button royal>
Contacts
<ion-icon name="contact"></ion-icon>
</button>
<button secondary>
Receive
<ion-icon name="arrow-round-back"></ion-icon>
</button>
<button danger>
Wallet
<ion-icon name="home"></ion-icon>
</button>
<button secondary>
Send
<ion-icon name="send"></ion-icon>
</button>
<button danger>
Transactions
<ion-icon name="archive"></ion-icon>
</button>
<button danger>
About
<ion-icon name="information-circle"></ion-icon>
</button>
</center>
</ion-toolbar>
</ion-footer>
#1
29
Css is going to work in same manner i assume.
Css将以我假设的相同方式工作。
You can center the content with something like this :
您可以使用以下内容对内容进行集中：
.center{
text-align:center;
}
Update
更新
To adjust the width in proper manner, modify your DOM as below :
要以适当的方式调整宽度，请修改DOM，如下所示：
<div class="item-input-inset">
<label class="item-input-wrapper"> Date
<input type="text" placeholder="Text Area" />
</label>
</div>
<div class="item-input-inset">
<label class="item-input-wrapper"> Suburb
<input type="text" placeholder="Text Area" />
</label>
</div>
CSS
CSS
label {
display:inline-block;
border:1px solid red;
width:100%;
font-weight:bold;
}
input{
float:right; /* shift to right for alignment*/
width:80% /* set a width, you can use max-width to limit this as well*/
}
演示
final update
最后更新
If you don't plan to modify existing HTML (one in your question originally), below css would make me your best friend!! :)
如果你不打算修改现有的HTML（原来你的问题中有一个），下面的css会让我成为你最好的朋友！ :)
html, body, .con {
height:100%;
margin:0;
padding:0;
}
.item-input-inset {
display:inline-block;
width:100%;
font-weight:bold;
}
.item-input-inset > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
演示
#2
89
You should put the button inside a div, and in the div you should be able to use the classes:
text-left, text-center and text-right.
你应该把按钮放在一个div中，在div中你应该能够使用这些类：text-left，text-center和text-right。
for example:
例如：
<div class="row">
<div class="col text-center">
<button class="button button-small button-light">Search</button>
</div>
</div>
And about the "textarea" position:
关于“textarea”的立场：
<div class="list">
<label class="item item-input">
<span class="input-label">Date</span>
<input type="text" placeholder="Text Area">
</label>
Demo using your code:
http://codepen.io/douglask/pen/zxXvYY
使用您的代码演示：http：//codepen.io/douglask/pen/zxXvYY
#3
12
To use center alignment in ionic app code itself, you can use the following code:
要在离子应用程序代码本身中使用中心对齐，您可以使用以下代码：
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
To use right alignment in ionic app code itself, you can use the following code:
要在离子应用程序代码本身中使用右对齐，您可以使用以下代码：
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
#4
0
And if we want to align a checkbox to the right, we can use item-end.
如果我们想要将复选框对齐，我们可以使用item-end。
<ion-checkbox checked="true" item-end></ion-checkbox>
#5
0
Another Ionic way. Using this ion-buttons tag, and the right keyword puts all the buttons in this group to the right. I made some custom toggle buttons that i wanted on one line, but the group to be right justified.
另一种离子方式。使用此ion-buttons标签和正确的关键字将此组中的所有按钮放在右侧。我在一条线上制作了一些我想要的自定义切换按钮，但该组是正确的。
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>#6
0
I Found the esiest soltuion just wrap the button with div and put text-center align-items-center in it like this :
我找到了esiest soltuion只是用div包装按钮并将text-center align-items-center放在其中，如下所示：
<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
#7
-3
center tag aligns the buttons within it as expected:
中心标记按预期对齐其中的按钮：
<ion-footer>
<ion-toolbar>
<center>
<button royal>
Contacts
<ion-icon name="contact"></ion-icon>
</button>
<button secondary>
Receive
<ion-icon name="arrow-round-back"></ion-icon>
</button>
<button danger>
Wallet
<ion-icon name="home"></ion-icon>
</button>
<button secondary>
Send
<ion-icon name="send"></ion-icon>
</button>
<button danger>
Transactions
<ion-icon name="archive"></ion-icon>
</button>
<button danger>
About
<ion-icon name="information-circle"></ion-icon>
</button>
</center>
</ion-toolbar>
</ion-footer>