如何使 Ion-toolbar 中的欄居中

Question

我嘗試了很多不同的方法來將酒吧放在離子中心，但沒有任何效果。 有誰知道如何解決這個問題？
我需要將條粘貼在中間，以便在不同設備上下載應用程序時，條將保持在中間

 .searchbar{ width: 352px; height: 42px; background: #C2C3C8; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25); border-radius: 90px; //position position:sticky; margin-top: 10px; } .morepagebutton{ width: 36px; height: 36px; border-radius: 50%; background: #F69E7B; box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25); //button position position: absolute; margin-left: 312px; margin-top: 3px; //vector size & position font-size: 29px; padding: 1px; } ion-toolbar { --background: #383E56; height: 77px; width: 500px; }

 <ion-footer> <ion-toolbar> <div class="searchbar"> <button class="morepagebutton" (click)="toMorePage()"> <ion-icon name="ellipsis-horizontal"></ion-icon> </button> </div> </ion-toolbar> </ion-footer>

Answer 1

您可以將ion-toolbar網格並使用justify-content 。 由於您為ion-toolbar設置的寬度，工具欄不在屏幕中央。

 .searchbar { width: 352px; height: 42px; background: #C2C3C8; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25); border-radius: 90px; //position position: sticky; margin-top: 10px; } .morepagebutton { width: 36px; height: 36px; border-radius: 50%; background: #F69E7B; box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25); //button position position: absolute; margin-left: 312px; margin-top: 3px; //vector size & position font-size: 29px; padding: 1px; } ion-toolbar { --background: #383E56; height: 77px; width: 500px; /* Added */ display: grid; justify-content: center; }

 <ion-footer> <ion-toolbar> <div class="searchbar"> <button class="morepagebutton" (click)="toMorePage()"> <ion-icon name="ellipsis-horizontal"></ion-icon> </button> </div> </ion-toolbar> </ion-footer>

Answer 2

不建議對寬度使用固定值，但您可以使用彈性框來執行此操作：

.searchbar {
    width: 352px;
    height: 42px;
    background: #C2C3C8;
    box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 25%);
    border-radius: 30px;
    -webkit-position: sticky;
    position: sticky;
    display: flex;
    justify-content: end;
    padding: 3px 6px;
    margin: auto;
}

.morepagebutton{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F69E7B;
  box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
  font-size: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-toolbar {
  --background: #383E56;
  height: 77px;
}

ion-footer ion-toolbar:last-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
}

<ion-footer>
  <ion-toolbar>

    <div class="searchbar">

      <button class="morepagebutton" (click)="toMorePage()">
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </button>

    </div>

  </ion-toolbar>
</ion-footer>