Search code examples
cssreactjsionic-frameworkstylingionic-react

Write proper css/styling for an image and a text next to it

I'm working on an Ionic React Project and I would like to add an image (the square below) and a text next to the image ('Home'), in the same line & height, in the header of my app. I have trying different css styles but nothing works.

enter image description here

import React from "react";
import {
  IonHeader,
  IonTitle,
  IonToolbar,
  IonIcon,
  IonMenuToggle,
  IonButton,
  IonButtons
} from "@ionic/react";
import { menuOutline } from "ionicons/icons";

const Header: React.FC = () => {
  return (
    <IonHeader>
      <IonToolbar className="menu-header">
        <IonButtons slot="start">
          <IonMenuToggle>
            <IonButton>
              <IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
            </IonButton>
          </IonMenuToggle>
        </IonButtons>
        <IonTitle>
                <img
                  src="../assets/imgs/logo.png"
                  alt="logo"
                  width="50"
                  height="50"
                />
             Home
        </IonTitle>
      </IonToolbar>
    </IonHeader>
  );
};

export default Header;

Any help would be really appreciated. Thank you!

Solution 
  • <div style="display:flex; align-items:center;"><img src="../assets/imgs/logo.png"
                  alt="logo"
                  width="50"
                  height="50"
                /> Home<div>