为图像和旁边的文本写正确的 css/styling

Question

我正在制作一个 Ionic React Project，我想添加一个 image（下面的正方形）和一个 text 图像旁边 ('Home')，在同一行和高度中，在我的应用程序的 header 中。我尝试了不同的 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;

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

Answer 1

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

为图像和旁边的文本写正确的 css/styling

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

css

styling

reactjs

ionic-framework

ionic-react