Html 使 ionic2 中的元素居中的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38064743/
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
Correct method to center elements in ionic2
提问by runtimeZero
I have placed some text and a button on page. I am currenlty centering it using traditional css methods that i know of. Is this the correct way to center in IONIC 2?
我在页面上放置了一些文本和一个按钮。我目前使用我所知道的传统 css 方法将其居中。这是在 IONIC 2 中居中的正确方法吗？
<ion-content padding class="login-signup">
<ion-card>
<div class="or-label">
SOME-TEXT
</div>
<div class="signup-button">
<button outline>Signup</button>
</div>
</ion-content>
// corresponding css
// 对应的css
.or-label {
width: 20%;
font-size: 16px;
margin: 0 auto;
margin-top: 2em;
margin-bottom: 2em;
height: 50px;
text-align: center;
color: red;
}
.signup-button {
text-align:center;
}
采纳答案by sebaferreras
Update
更新
Just like @AndrewGraham-Yooll mentioned in his answer, the fab-centerattribute was removed a few versions ago, so now the only way to do it would be to use a container with the text-centerutility attribute
就像@AndrewGraham-Yooll 在他的回答中提到的那样，该fab-center属性在几个版本前已被删除，所以现在唯一的方法是使用具有实用程序属性的容器text-center
<ion-content padding class="login-signup">
<ion-card text-center>
<div class="or-label">
SOME-TEXT
</div>
<button outline>Signup</button>
</ion-card>
</ion-content>
You can center the buttonby adding the Ionic2 attributefab-centerlike this:
您可以button通过添加Ionic2 属性来居中，fab-center如下所示：
<button fab-center outline>Signup</button>
<button fab-center outline>Signup</button>
You can find more information about Ionic2 attributes in Ionic2 docs.
您可以在Ionic2 文档中找到有关 Ionic2 属性的更多信息。
Regarding the other div, because it's not an Ionic component (like a button, or label), you should center it by using some traditional css ruleslike you're doing or using a Utility attributelike text-center.
关于另一个div，因为它不是 Ionic 组件（如按钮或标签），您应该使用一些传统的方式将其居中，css rules就像您正在做的那样或使用实用程序属性，例如text-center.
Please also notice that in your code, there is a missing clossing tag:
</ion-card>
另请注意，在您的代码中，缺少结束标记：
</ion-card>
回答by Will.Harris
Ionic 2 has some useful Utility Attributesthat can be added to elements.
Ionic 2 有一些有用的工具属性，可以添加到元素中。
In this case adding text-centerto an element will apply the text-align: centerproperty to it, causing its inner content to be centered.
在这种情况下，添加text-center到元素会将text-align: center属性应用于它，导致其内部内容居中。
An example using your code would be something like...
使用您的代码的示例类似于...
<ion-card text-center>
<div class="or-label">
SOME-TEXT
</div>
<button outline>Signup</button>
</ion-card>
回答by Andrew Graham-Yooll
@sebferras' answer is no longer correct for release Ionic 2 >2.0.0
@sebferras 的答案不再适用于发布 Ionic 2 >2.0.0
You must encase you button in a divand apply text-center.
您必须将按钮包裹在 a 中div并应用text-center。
<div text-center>
<button ion-button large>
Click Here
</button>
</div>
