为图像和旁边的文本编写适当的 css/样式

问题描述

我正在处理 Ionic React Project，我想在图像（'Home'），在我的应用程序的标题中，在同一行和高度。我尝试了不同的 css 样式，但没有任何效果。

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;

任何帮助将不胜感激。谢谢！

解决方法

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