堆栈内存溢出
  繁体   English   中英

无法在 div 中居中内容

[英]Having trouble centering content in a div

 原文  2022-05-31 18:10:17  2   1    javascript/ html/ css/ centering

问题描述

我是使用 css 编码的新手，我遇到了一些问题。 尽管我已经将显示设置为 flex 并将 justify-content 设置为居中，但方块还是偏离了一点。 我希望它具有响应性，但它​​不适用于宽度：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;
};

1 个解决方案

解决方案1
 2 已采纳  2022-05-31 19:27:44

当您创建网格#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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 难以使DIV元素居中 jQuery遇到麻烦，无法重新显示div内容 使div居中并出现问题 div在容器中居中的内容 定位 Div 时遇到问题 居中溢出：DIV 内的自动内容 无法将最后两张图像居中，并且第一张图像被夸大了 我无法将 HTML 表的单元格居中 居中父 div 滚动条，具有动态宽度 无法将div ID作为功能参数传递
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM