Image not vertically aligned in onCol

Dear.

I need to add an avatar, which when pressing shows a modal menu. The avatar has to be displayed to the right and in the center of the column. It is currently displayed on the right but not in the center of the column.

ModalMenu1362×67 1.95 KB

It can be seen that the avatar is at the top of the column

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar >
        <IonGrid>
          <IonRow id="cabecera">
          <IonCol id="columna" ><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
            <IonCol id="columna" ><Busqueda /></IonCol>
            <IonCol id="columna" > <ModalExample></ModalExample></IonCol>
          </IonRow>
        </IonGrid>
          <IonTitle></IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large"></IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer  />
      </IonContent>
    </IonPage>
  );
};

This is the modal element:

  export const ModalExample: React.FC = () => {
    const [showModal, setShowModal] = useState(false);
  
    return (
      <IonContent >
        <IonModal isOpen={showModal} cssClass='my-custom-class' animated={true}>
          <p>This is modal content</p>
          <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
        </IonModal>
        <IonAvatar onClick={() => setShowModal(true)} id="img" >
        <img src={"./assets/icon/nuevoUsuario.png"} id="icono" />
        </IonAvatar>
      </IonContent>
    );
  };

This is the CSS code:

  #img{
    float: right;
    height: 32px;
    width: 32px;
  }

  #columna{
    display: inline-block;
    vertical-align: middle;
  }

1 post - 1 participant

Read full topic