how to center the bar in Ion-toolbar-CodePudding

I tried so many different ways to centre the bar in ionic but nothing worked. Does anyone know how to solve this?
I need to stick the bar in the middle so that when the application download on the different devices the bar will remain in the centre

.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 >

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

    </div>

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

CodePudding user response：

You could make ion-toolbar a grid and use justify-content. The toolbar is not in the center of the screen because of the width you have set for 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 >
      <button  (click)="toMorePage()">
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </button>
    </div>
  </ion-toolbar>
</ion-footer>

CodePudding user response：

it is not recommended to use fixed values for width but you can use flex box to do this:

.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 >

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

    </div>

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