Javascript React-将图像框包装设置为居中

我的公文包组件上的

没有并排排列公文包图片。我似乎找不到他们为什么不并排布局的问题。我认为这将是CSS的主要部分，将影响这一点

.portfolio-image {
  width: 15rem;
  margin: 0 auto;
  border: 1px solid var(--primary-green);
  padding: 0 0.5rem;
  justify-content: center;
}

我检查了拼写，确保分区已关闭，但仍然没有任何内容。我仍然得到一列，而不是并排（水平）。你可以在下面的链接中看到我的投资组合页面上的问题。谢谢你的帮助

投资组合组成部分

import React from "react";
import prw from "../images/prw.png";
import fitnesstracker from "../images/fitnesstracker.png";
import budgettracker from "../images/budgettracker.png";
import pangea from "../images/pangea.png";
//Font Awesome Imports
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearchPlus } from "@fortawesome/free-solid-svg-icons";
//React POPUPBOX
import { PopupboxManager, PopupboxContainer } from "react-popupbox";
import "react-popupbox/dist/react-popupbox.css";

const Portfolio = () => {

  //Prow
  const openPopupboxProw = () => {
    const content = (
    <>
    <img className="portfolio-image-popupbox" src={prw} alt="prw"/>
    <p> Description of Popular Restaurants of the World
    As a traveler, I want to be able to search a location for surrounding restaurants so that I can find a local establishment to fit my needs.
<br></br>
<br></br>
      uses Foundation css framework
      application utilizes Zomato, and Google API's to retrieve restaurant data
      user can search restaurants around the world based on location and food type
      user searched cities are saved to local storage and can be accessed via the navbar
      when user inputs a location and food type the page will scroll to an embedded map with markers displaying local restaurants that meet search criteria
      when user clicks on map marker info about the restaurant will be displayed as well as a get directions link
    </p>
    <b>GitHub: </b> <a className="hyper-link" onClick={() => window.open("https://github.com/Rinzler8806/Popular-Restaurants-of-the-World-1")}>https://github.com/Rinzler8806/Popular-Restaurants-of-the-World-1</a>
    </>
    )
    PopupboxManager.open({content});
    PopupboxManager.update({
      content,
      config: {
        titleBar: {
          text: "Popular Restaurants of the World",
        },
      },
    });
  }

  const popupboxConfigProw = {
    titleBar: {
      enable: true,
      text: "Popular Restaurants of the World"
    },
    fadeIn: true,
    fadeInSpeed: 500
  }

  //fitnesstracker
  const openPopupboxFitnesstracker = () => {
    const content = (
    <>
    <img className="portfolio-image-popupbox" src={fitnesstracker} alt="fitnesstracker"/>
    <p>
<br></br>
<br></br>
This app has been created with the intention to be able to view create and track daily workouts. The user will be able to log multiple exercises in a workout on a given day. The user will also be able to track the name, type, weight, sets, reps, and duration of exercise. If the exercise is a cardio exercise, the user will be able to track their distance traveled.
    </p>
    <b>Demo: </b> <a className="hyper-link" onClick={() => window.open("https://infinite-beach-02354.herokuapp.com/exercise?id=6065391b3f573d0015bbd57e", "_blank")}>https://infinite-beach-02354.herokuapp.com/exercise?id=6065391b3f573d0015bbd57e</a>
    <br></br>
    <b>GitHub: </b> <a className="hyper-link" onClick={() => window.open("https://github.com/Rinzler8806/fitnessTracker")}>https://github.com/Rinzler8806/fitnessTracker</a>
    </>
    )
    PopupboxManager.open({content});
    PopupboxManager.update({
      content,
      config: {
        titleBar: {
          text: "Fitness Tracker",
        },
      },
    });
  }

  const popupboxConfigFitnesstracker = {
    titleBar: {
      enable: true,
      text: "Fitness Tracker"
    },
    fadeIn: true,
    fadeInSpeed: 500
  }

   //budgettracker
   const openPopupboxBudgettracker = () => {
    const content = (
    <>
    <img className="portfolio-image-popupbox" src={budgettracker} alt="budgettracker"/>
    <p>
<br></br>
<br></br>
The user will be able to add expenses and deposits to their budget with or without a connection. When entering transactions offline, they should populate the total when brought back online.
<br></br>
Offline Functionality:
Enter deposits offline.
Enter expenses offline.
<br></br>
When brought back online:
Offline entries should be added to tracker.
    </p>
    <b>Demo: </b> <a className="hyper-link" onClick={() => window.open("https://fathomless-sea-54648.herokuapp.com/", "_blank")}>https://fathomless-sea-54648.herokuapp.com/</a>
    <br></br>
    <b>GitHub: </b> <a className="hyper-link" onClick={() => window.open("https://github.com/Rinzler8806/BudgetTracker")}>https://github.com/Rinzler8806/BudgetTracker</a>
    </>
    )
    PopupboxManager.open({content});
    PopupboxManager.update({
      content,
      config: {
        titleBar: {
          text: "Budget Tracker",
        },
      },
    });
  }

  const popupboxConfigBudgettracker = {
    titleBar: {
      enable: true,
      text: "Budget Tracker"
    },
    fadeIn: true,
    fadeInSpeed: 500
  }

     //Pangea
     const openPopupboxPangea = () => {
      const content = (
      <>
      <img className="portfolio-image-popupbox" src={pangea} alt="Pangea"/>
      <p> Pangea
  <br></br>
  <br></br>
  A dynamic messaging application that connects users around the globe. It offers many features and the ability to actively translate your message to a selected language.
  <br></br>
  Log in as: Batman and use password: password to view demo.
      </p>
      <b>Demo: </b> <a className="hyper-link" onClick={() => window.open("https://pangeachat.herokuapp.com/", "_blank")}>https://pangeachat.herokuapp.com/</a>
      <br></br>
      <b>GitHub: </b> <a className="hyper-link" onClick={() => window.open("https://github.com/Rinzler8806/pangea-chat")}>https://github.com/Rinzler8806/pangea-chat</a>
      </>
      )
      PopupboxManager.open({content});
      PopupboxManager.update({
        content,
        config: {
          titleBar: {
            text: "Pangea",
          },
        },
      });
    }
  
    const popupboxConfigPangea = {
      titleBar: {
        enable: true,
        text: "Pangea"
      },
      fadeIn: true,
      fadeInSpeed: 500
    }



  return (
    <div id="Portfolio" className="portfolio-wrapper">
      <div className="container">
        <h1 className="text-uppercase text-center py-5">Portfolio</h1>
        <div Classname="image-box-wrapper row justify-content-center">
          <div Classname="portfolio-image-box" onClick={openPopupboxProw}>
          <img className="portfolio-image" src={prw} alt="prw" />
          <div className="overflow"></div>
          <FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
        </div>
        {/* - */}
        <div Classname="portfolio-image-box" onClick={openPopupboxFitnesstracker}>
          <img className="portfolio-image" src={fitnesstracker} alt="fitnesstracker" />
          <div className="overflow"></div>
          <FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
        </div>
        {/* - */}
        <div Classname="portfolio-image-box" onClick={openPopupboxBudgettracker}>
          <img className="portfolio-image" src={budgettracker} alt="budgettracker" />
          <div className="overflow"></div>
          <FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
        </div>
        {/* - */}
        <div Classname="portfolio-image-box" onClick={openPopupboxPangea}>
          <img className="portfolio-image" src={pangea} alt="pangea" />
          <div className="overflow"></div>
          <FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
          </div>
        </div>
        </div>
        <PopupboxContainer {...popupboxConfigProw} />
        <PopupboxContainer {...popupboxConfigFitnesstracker} />
        <PopupboxContainer {...popupboxConfigBudgettracker} />
        <PopupboxContainer {...popupboxConfigPangea} />
        </div> 
  )
}

export default Portfolio;

---

您似乎错过了

图像框包装器

，

行

和

justify资源中心

类

这就是为什么没有样式应用于容器

在chrome开发工具中添加一个简单的

display:flex

，解决了这个问题

---

也许我做错了什么。当我为display:flex添加样式时，没有任何更改。我确实把它添加到了.portfolio图像{display:flex}中，它将一个盒子垂直堆叠在另一个盒子的中间。然而，我希望他们出现在你的截图上。我还尝试添加专门用于图像框包装的样式，但没有任何更改。图像框包装器{display:flex；}如果您对这个新手有任何进一步的了解，我们将不胜感激！尝试直接在父容器上添加样式道具，并将

display:'flex'

设置为内联样式。如果这样做有效，那就意味着你的类出了问题。因为它们没有正确打包。谢谢你的帮助尼桑斯！我只是注意到我把“className”拼写为“className”。一旦我改变了这个，一切都正确地就位了！再次感谢：）很高兴能帮忙：）

.portfolio-wrapper {
  background: var(--primary-light-grey);
  padding: 3rem 0;
}

.portfolio-wrapper h1 {
  color: var(--primary-green);
}

.portfolio-image {
  width: 15rem;
  border: 1px solid var(--primary-green);
  padding: 0 0.5rem;
  justify-content: center;
}

.portfolio-image-box {
  position: relative;
  margin: 1rem;
}

.popupbox-wrapper {
  margin-top: 7rem;
}

/*OVERFLOW BOX*/

.overflow {
  position: absolute;
  opacity: 0;
  background: var(--primary-black);
  width: 15rem;
  height: 8rem;
  top: 0;
  border: 1px solid var(--primary-purple);
  cursor: pointer;
}

.portfolio-image-box:hover .overflow {
  opacity: 60%;
  transition: 0.3s ease-in-out;
}

.portfolio-icon {
  position: absolute;
  opacity: 0;
  margin-left: -8rem;
  margin-top: 3.6rem;
  color: var(--primary-purple);
  font-size: 1.5rem;
}

.portfolio-image-box:hover .portfolio-icon {
  opacity: 70%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

/*POPUPBOX*/
.portfolio-image-popupbox {
  width: 45rem;
  padding: 0 0.5rem;
}

.hyper-link {
  cursor: pointer;
  color: var(--primary-blue);
}

.hyper-link:hover {
  color: var(--primary-purple);
}

/*MEDIA*/

@media(max-width: 768px) {
  .portfolio-image-popupbox {
    width: 100%;
}
}

@media(max-height: 570px) {
.popupbox-wrapper {
  height: 100%;
}

  .portfolio-image-popupbox {
    width: 50%;
}
}

@media(max-height: 570px) {
  .popupbox-content {
    height: 100%;
  }
  
    .portfolio-image-popupbox {
      width: 100%;
  }
  }

  @media(max-height: 280px) {
    .popupbox-wrapper {
      height: 90%;
    }
    
      .portfolio-image-popupbox {
        width: 30%;
    }
    }