使用position：absolute来居中使用ion-title

Question

我是离子框架的初学者。最近我在导航栏的左侧建立了一个带有滑动后退按钮的页面。这将标题稍微向右移动:(我在标题中添加了红色背景来说明这一点）

Not using position: absolute

为了使标题居中，我添加了以下css代码：

ion-title {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: red;
}

有效：

Using position: absolute

问题是标题现在“覆盖”了后退按钮，因此无法点击按钮。

任何解决方案？提前谢谢。

Answer 1

尝试将position:relative和一些z-index值添加到后退按钮...

我创建了一个工作片段来说明您的问题

＆＃13;

＆＃13;

div {
  position: relative;
}

ion-title {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: red;
  box-sizing: border-box;
}

button {
  width: 20px;
  height: 20px;
  background: green;
  position: relative;
  z-index: 99;
}

＆＃13;

<div>
  <button></button>
  <ion-title>About</ion-title>
</div>

＆＃13;

＆＃13;

＆＃13;