如何在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。