如何使按钮更明显？

Question

我有一个离子按钮（使用离子框架的按钮）太低了。这是一个 ionic/angular 项目。我觉得我已经尝试了所有方法来将其拉起，但我的尝试以失败告终（向上拉按钮但按钮向左对齐；按下按钮；向上拉按钮但按钮向右移动一点点...... ETC）。我试过边距、间距、填充；我试过绝对定位；我什至尝试过 flexbox 和 ion-grid。

我只想拉起按钮，几乎就像页脚一样，并使其居中。

这是我的代码：

HTML代码

<div class="bottomBar">
  <ion-button> <!-- <fill="block" style="position: absolute; bottom:50px;"> -->
    Order Skirt
  </ion-button>
</div>

CSS代码

.bottomBar {
  z-index: 2;
  //padding-bottom: 30px;
  text-align: center;
  //margin-left: 50vw;
  //margin-right: 50%;
  //width: 100% - 30px;
}

感谢观看。

Answer 1

如果您想要一个固定在视口底部的按钮，请参见：

/* draw outline around div (for demonstration only) */
div {
  outline: 1px solid dodgerblue;
}

/* bar fixed to bottom */
.bottomBar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1024;
  display: flex;
  padding-bottom: 15px;
}

/* center contents of div */
.center-contents {
  justify-content: center;
}

<div class="bottomBar center-contents">
  <button> 
    Order Skirt
  </button>
</div>

如何使按钮更明显？

How can I make the button more visible?

html

css

button

angularjs

ionic-framework