CSS 如何使用 IONIC 框架在中心或右侧对齐按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25861158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I align button in Center or right using IONIC framework?
提问by Preety Sapra
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.
我在bootstrap 中知道，但我是 ionic 的新手，请告诉我我该怎么做。
采纳答案by NoobEditor
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%;
}
回答by Douglas K.
You should put the button inside a div, and in the div you should be able to use the classes:
text-left, text-centerand 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
回答by Alvin Chettiar
To use center alignment in ionic app code itself, you can use the following code:
要在 ionic 应用程序代码本身中使用居中对齐，您可以使用以下代码：
<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:
要在 ionic 应用程序代码本身中使用右对齐，您可以使用以下代码：
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
回答by Otpidus
Ultimately, we are trying to get to this.
最终，我们正在努力做到这一点。
<div style="display: flex; justify-content: center;">
<button ion-button>Login</button>
</div>
回答by alchi baucha
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>
回答by Mark
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 标签，以及 right 关键字将这个组中的所有按钮都放在右边。我在一行上制作了一些我想要的自定义切换按钮，但该组是正确的。
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>回答by Khaled Alhindi
I Found the esiest soltuion just wrap the button with div and put text-center align-items-center in it like this :
我发现最简单的解决方案只是用 div 包裹按钮并将 text-center align-items-center 放入其中，如下所示：
<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
回答by Kwadwo
centertag aligns the buttons within it as expected:
center标签按预期对齐其中的按钮：
<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>
