將交叉png居中到css網格中

我在網頁上做井字游戲。

一切正常，現在我想用圓形或十字形影像替換單元格內的文本。每個 div 包含一個影像，我根據用戶的輸入顯示或不顯示。這就是為什么我要插入并居中每個 img 元素。如何在每個單元格中顯示這些 cross.png ？目前，十字影像位于頁面中間

  .grid-container {
  display: inline-grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  border: 1px solid #000000;
  grid-gap: 1px;
  background-color: black;
  .grid-container>div {
    background-color: white;
    color: red;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #button1 {
    background-color: #4caf50;
    /* Green */
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    font-size: 16px;
  }
  #button2 {
    background-color: #614caf;
    /* Green */
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    font-size: 16px;
  }
  #button3 {
    background-color: #d36544;
    /* Green */
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    font-size: 16px;
  }

<div class="grid-container">
  <div id="0">
    <img id="img0" , src="images/cross.png" />
  </div>

  <div id="1">
    <img id="img1" , src="images/cross.png" />
  </div>

  <div id="2">
    <img id="img2" , src="images/cross.png" />
  </div>

  <div id="3">
    <img id="img3" , src="images/cross.png" />
  </div>

  <div id="4">
    <img id="img4" , src="images/cross.png" />
  </div>

  <div id="5">
    <img id="img5" , src="images/cross.png" />
  </div>

  <div id="6">
    <img id="img6" , src="images/cross.png" />
  </div>

  <div id="7">
    <img id="img7" , src="images/cross.png" />
  </div>

  <div id="8">
    <img id="img8" , src="images/cross.png" />
  </div>
</div>

<div class="choice-container">
  <button id="button1">Cross</button>
  <button id="button2">Circle</button>
  <button id="button3">Reset</button>
</div>

uj5u.com熱心網友回復：

僅缺少一個字符。在第一類定義的末尾：}

.grid-container {
  ...
} <--- this one

uj5u.com熱心網友回復：

如果我們將缺少的右大括號添加到第一個規則塊，您的 CSS 看起來不錯。我們還將從 HTML 中洗掉逗號。

.grid-container {
  display: inline-grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  border: 1px solid #000000;
  grid-gap: 1px;
  background-color: black;
}

.grid-container>div {
  background-color: white;
  color: red;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#button1 {
  background-color: #4caf50;
  /* Green */
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  /* display: inline-block; */
  font-size: 16px;
}

#button2 {
  background-color: #614caf;
  /* Green */
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  /* display: inline-block; */
  font-size: 16px;
}

#button3 {
  background-color: #d36544;
  /* Green */
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  /* display: inline-block; */
  font-size: 16px;
}

<div class="grid-container">
  <div id="0">
    <img id="img0" src="https://via.placeholder.com/40" />
  </div>

  <div id="1">
    <img id="img1" src="https://via.placeholder.com/40" />
  </div>

  <div id="2">
    <img id="img2" src="https://via.placeholder.com/40" />
  </div>

  <div id="3">
    <img id="img3" src="https://via.placeholder.com/40" />
  </div>

  <div id="4">
    <img id="img4" src="https://via.placeholder.com/40" />
  </div>

  <div id="5">
    <img id="img5" src="https://via.placeholder.com/40" />
  </div>

  <div id="6">
    <img id="img6" src="https://via.placeholder.com/40" />
  </div>

  <div id="7">
    <img id="img7" src="https://via.placeholder.com/40" />
  </div>

  <div id="8">
    <img id="img8" src="https://via.placeholder.com/40" />
  </div>
</div>

<div class="choice-container">
  <button id="button1">Cross</button>
  <button id="button2">Circle</button>
  <button id="button3">Reset</button>
</div>

其他提示：

• 為您的 CSS 使用類而不是 ID。這使它們可以重復使用。
• 將所有重復的 CSS 規則組合成一個類，并將其應用于所有按鈕。或者，將按鈕包裝在一個容器中，并在其上使用一個類來定位按鈕，如.container button {}.
• body在您的內容周圍添加標簽（未編輯的原始帖子中缺少）

標籤：html css css网格

上一篇：如果文本框為空或空白，我想在待辦事項串列項中寫入“空”

下一篇：切換功能后激活懸停顏色