边际不适用于离子中的h2元素

Question

<ion-view>
<ion-content class="has-header padding coloredBackground">



<h2 class="centerHeading"> Receive your Order by:  </h2>
</ion-content>


</ion-view>

的CSS：

.centerHeading{
    text-align: center;
    color: #6E6E6E;
    margin-top:20px;

}

该事项的保证金最高或保证金根本没有。我该如何解决这个问题？

演示：http://play.ionic.io/app/6d960c043467

Answer 1

您的margin-top被ion.min.css -

越来越多

因为，在你的ionic.min.css文件中，

h2:first-child{
  margin-top:0px;
}

解决方案1：

在你的样式表中用自己的css覆盖h2的css样式，按照

h2:first-child{
  margin-top:20px;
}

解决方案2：

.centerHeading{
    text-align: center;
    color: #6E6E6E;
    margin-top:20px !important;
}

这里是解释“！important”，Click Here

的链接

Answer 2

您的订单包含错误顺序的CSS。 margin-top覆盖了ionic.min.css

您有两种选择：

选项1

在ionic.min.css

之后更改自定义css文件

选项2

使用!important

定义属性

  margin-top: 20px !important;