如何让按钮更显眼？

Question

我有一个太低的离子按钮（使用离子框架的按钮）。这是一个离子/角度项目。我觉得我已经尝试了一切将其拉起，但我的尝试导致失败（拉起按钮但按钮向左对齐；按下按钮；拉起按钮但按钮在中心右侧稍微移动......等等）。我试过使用边距、间距、填充；我试过绝对定位；我什至尝试过 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>