如何對齊 ProfilePage.jsx 文件中 ReactJS 中的圖像？ 以及如何添加雙邊框？

Question

return (
    <div className = "mx-auto w-11/12 md:w-2/4 py-8 px-4 md:px-8">
      <div className="flex border flex-col items-center md:flex-row md:items-start border-blue-400 px-3 py-4">
        <div
          style={{
            background: `url(${photoURL || 'https://res.cloudinary.com/dqcsk8rsc/image/upload/v1577268053/avatar-1-bitmoji_upgwhc.png'})  no-repeat center center`,
            backgroundSize: "cover",
            height: "110px",
            width: "110px",
            borderRadius: "80px",
            border: 'solid 6.5px #E6CDF2',
            
            
        

您好，我正在嘗試使用 AlignContent 和 justifyContent 對齊此圖片，但沒有任何效果。 這是我在 ProfilePage.jsx 文件中用於設計圖像的代碼。 我不確定如何對齊它。 還想知道如何（如果可能）在這里添加雙邊框。

Answer 1

嘗試使用 AlignItems 而不是 AlignContent。