在 div 中将内容居中时遇到问题

Question

我刚开始使用 css 进行编码，我遇到了一些问题。即使我已将显示设置为 flex 并将 justify-content 设置为居中，方块也会稍微偏离。我希望它具有响应性，但它不适用于 width: 100%。不知道还能做什么。没有任何宽度和高度它看起来不对

//html

<body>
  <div id="scores">
    <p class="correct"><span class="amount"></span></p>
    <p class="wrong">Lives left: <span class="amount2"></span></p>
  </div>
  <div id="thePuzzle"></div>
  <script src="app.js"></script>
</body>

//css

body {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#thePuzzle {
  display: grid;
  grid-template-columns: repeat(3, 4rem);
  gap: 1rem;
  column-gap: 3rem;
  perspective: 800px;
}
.card {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: all 2s ease;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
  height: 100px;
  width: 100px;
}
.face,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}
.back {
  background-color: rgb(111, 24, 111);
  backface-visibility: hidden;
}
.toggleCard {
  transform: rotateY(180deg);
}
#scores {
  display: flex;
  justify-content: center;
  font-size: larger;
  font-weight: 600;
}
.wrong {
  text-align: center;
}

//js

const mainDiv = document.querySelector("#thePuzzle");
const span = document.querySelector(".amount");
const span2 = document.querySelector(".amount2");
const scoreArea = document.getElementById("scores");
let amountCorrect = 0;
let amountWrong = 3;
span2.textContent = amountWrong;

//Creating the array of image objects
const imageArrayObj = () => [
  { imageSrc: "./fox.jpg", imageName: "fox" },
  { imageSrc: "./gir.jpg", imageName: "giraffe" },
  { imageSrc: "./panda.png", imageName: "panda" },
  { imageSrc: "./fox.jpg", imageName: "fox" },
  { imageSrc: "./gir.jpg", imageName: "giraffe" },
  { imageSrc: "./panda.png", imageName: "panda" },
];
//randomize the array
const randomize = () => {
  const randArray = imageArrayObj();
  randArray.sort(() => Math.random() - 0.5);
  return randArray;
};

//we must create each box which is a div with an image and another div
const cardGenerator = () => {
  const cards = randomize();
  //we need to itterate through the image array
  cards.forEach((element) => {
    const card = document.createElement("div");
    const face = document.createElement("img");
    const back = document.createElement("div");
    card.classList = "card";
    back.classList = "back";
    face.classList = "face";
    face.src = element.imageSrc;
    card.setAttribute("name", element.imageName);

    //attach card to the main div
    mainDiv.appendChild(card);
    card.appendChild(face);
    card.appendChild(back);

    /// We need to be able to click a single card
    //then be able to turn only the clicked card over
    card.addEventListener("click", (e) => {
      card.classList.toggle("toggleCard");
      checkCard(e);
    });
  });
};

const checkCard = (e) => {
  const clickedCard = e.currentTarget;
  console.log(clickedCard);
  clickedCard.classList.add("flipped");
  //logic
  const flippedCard = document.querySelectorAll(".flipped");
  if (flippedCard.length === 2) {
    if (
      flippedCard[0].getAttribute("name") ===
      flippedCard[1].getAttribute("name")
    ) {
      amountCorrect++;
      flippedCard.forEach((element) => {
        element.classList.remove("flipped");
        element.style.pointerEvents = "none";
        // this makes the card unclickable
        // so when you get it right it stays
      });

      if (amountCorrect === 3) {
        setTimeout(() => {
          restBtn();
        }, 1500);
      }
    } else {
      amountWrong--;
      span2.textContent = amountWrong;
      flippedCard.forEach((element) => {
        element.classList.remove("flipped");
        setTimeout(() => {
          element.classList.remove("toggleCard");
        }, 1000);
      });
      if (amountWrong === 0) {
        setTimeout(() => {
          restBtn();
        }, 1000);
      }
    }
  }
};

cardGenerator();
const restBtn = () => {
  let cardData = randomize();
  let cards = document.querySelectorAll(".card");
  let face = document.querySelectorAll(".face");
  
  cardData.forEach((element, index) => {
    cards[index].classList.remove("toggleCard");
    setTimeout(() => {
      cards[index].style.pointerEvents = "all";
      face[index].src = element.imageSrc;
      cards[index].setAttribute("name", element.imageName);
    },1000);
  });
  //set socres back to zero
  amountCorrect = 0;
  amountWrong = 3;
  span2.textContent = amountWrong;
};

Answer 1

当您创建网格 #thePuzzle 时，您正在使用 grid-template-columns 创建 3 列，每列宽度为 4rem。然后紧接着你通过将 .card 元素设置为 100px 宽度来反驳它。

改变你的css：

#thePuzzle {
  display: grid;
  grid-template-columns: repeat(3, 100px); 
  gap: 1rem;
  column-gap:3rem;
  perspective: 800px;
}

这是一个片段，您可以看到它的工作原理。网格保持死点。

const mainDiv = document.querySelector("#thePuzzle");
const span = document.querySelector(".amount");
const span2 = document.querySelector(".amount2");
const scoreArea = document.getElementById("scores");
let amountCorrect = 0;
let amountWrong = 3;
span2.textContent = amountWrong;

//Creating the array of image objects
const imageArrayObj = () => [{
    imageSrc: "./fox.jpg",
    imageName: "fox"
  },
  {
    imageSrc: "./gir.jpg",
    imageName: "giraffe"
  },
  {
    imageSrc: "./panda.png",
    imageName: "panda"
  },
  {
    imageSrc: "./fox.jpg",
    imageName: "fox"
  },
  {
    imageSrc: "./gir.jpg",
    imageName: "giraffe"
  },
  {
    imageSrc: "./panda.png",
    imageName: "panda"
  }
];
//randomize the array
const randomize = () => {
  const randArray = imageArrayObj();
  randArray.sort(() => Math.random() - 0.5);
  return randArray;
};

//we must create each box which is a div with an image and another div
const cardGenerator = () => {
  const cards = randomize();
  //we need to itterate through the image array
  cards.forEach((element) => {
    const card = document.createElement("div");
    const face = document.createElement("img");
    const back = document.createElement("div");
    card.classList = "card";
    back.classList = "back";
    face.classList = "face";
    face.src = element.imageSrc;
    card.setAttribute("name", element.imageName);

    //attach card to the main div
    mainDiv.appendChild(card);
    card.appendChild(face);
    card.appendChild(back);

    /// We need to be able to click a single card
    //then be able to turn only the clicked card over
    card.addEventListener("click", (e) => {
      card.classList.toggle("toggleCard");
      checkCard(e);
    });
  });
};

const checkCard = (e) => {
  const clickedCard = e.currentTarget;
  console.log(clickedCard);
  clickedCard.classList.add("flipped");
  //logic
  const flippedCard = document.querySelectorAll(".flipped");
  if (flippedCard.length === 2) {
    if (
      flippedCard[0].getAttribute("name") ===
      flippedCard[1].getAttribute("name")
    ) {
      amountCorrect++;
      flippedCard.forEach((element) => {
        element.classList.remove("flipped");
        element.style.pointerEvents = "none";
        // this makes the card unclickable
        // so when you get it right it stays
      });

      if (amountCorrect === 3) {
        setTimeout(() => {
          restBtn();
        }, 1500);
      }
    } else {
      amountWrong--;
      span2.textContent = amountWrong;
      flippedCard.forEach((element) => {
        element.classList.remove("flipped");
        setTimeout(() => {
          element.classList.remove("toggleCard");
        }, 1000);
      });
      if (amountWrong === 0) {
        setTimeout(() => {
          restBtn();
        }, 1000);
      }
    }
  }
};

cardGenerator();
const restBtn = () => {
  let cardData = randomize();
  let cards = document.querySelectorAll(".card");
  let face = document.querySelectorAll(".face");

  cardData.forEach((element, index) => {
    cards[index].classList.remove("toggleCard");
    setTimeout(() => {
      cards[index].style.pointerEvents = "all";
      face[index].src = element.imageSrc;
      cards[index].setAttribute("name", element.imageName);
    }, 1000);
  });
  //set socres back to zero
  amountCorrect = 0;
  amountWrong = 3;
  span2.textContent = amountWrong;
};

body {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(238, 174, 202);
  background: radial-gradient( circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#thePuzzle {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 1rem;
  column-gap: 3rem;
  perspective: 800px;
}

.card {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: all 2s ease;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
  height: 100px;
  width: 100px;
}

.face,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}

.back {
  background-color: rgb(111, 24, 111);
  backface-visibility: hidden;
}

.toggleCard {
  transform: rotateY(180deg);
}

#scores {
  display: flex;
  justify-content: center;
  font-size: larger;
  font-weight: 600;
}

.wrong {
  text-align: center;
}

<div id="scores">
  <p class="correct"><span class="amount"></span></p>
  <p class="wrong">Lives left: <span class="amount2"></span></p>
</div>
<div id="thePuzzle"></div>

在 div 中将内容居中时遇到问题

Having trouble centering content in a div

javascript

html

css

centering