Image not vertically aligned in onCol

Ionic Framework Ionic React
1

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.

ModalMenu
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;
  }
2

Having a hard time following your example but I think you could try setting a line-height on #columna and moving vertical-align to the #img:

#img {
  vertical-align: middle
}

#columna {
  display: inline-block;
  line-height: 32px;
}
3

Thanks max.

Can I please check why the image is not centered when:

#columna {
display: table-cell;
vertical-align: middle;
}

Because columna is a container, like a div container.

4

I’ve pushed CSS tables out of my mind, so instead I’d do this:

#columna {
  display: flex;
  align-items: center;
  justify-content: center;
}

#img {
  display: block;
}