css - margin 不适用于 ionic 中的 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;

}

margin-top 或 margin 根本不起作用。我该如何解决这个问题？

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

Answer 1

你的 margin-top 被 ionic.min.css 覆盖了-

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

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

解决方案一:

要么在样式表中用你自己的 css 覆盖 h2 的 css 样式，方法如下

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

解决方案 2:

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

这里是解释“!important”的链接，Click Here