我還是一個編程初學(xué)者，我正在做一個項(xiàng)目來提高知識。我需要在圖像頂部插入一個帶有文本的 div，我正在嘗試重新創(chuàng)建下圖的示例：div 的一半是圖像，另一半是文本。你能告訴我該怎么做嗎？這是我放入codeandbox 的代碼import React from "react";import "./styles.css";export default function App() {  return (    <div className="App">      <h1>Restaurant</h1>      <div        style={{          display: "flex",          flexDirection: "column",          justifyContent: "baseline",          alignItems: "baseline",          height: "200px",          width: "100%",          maxWidth: "300px"        }}      >        <div>          <img            style={{              width: "100%",              height: "100%"            }}            src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"            alt=""            className="img"          />        </div>        <div className="divText">          <span            style={{              color: "#fff",              backgroundColor: "#000"            }}          >            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!          </span>        </div>      </div>    </div>  );}