让居中标签填满整个父级 div

Question

我正在使用标签 check/uncheck 隐藏的复选框。我需要能够单击 div 内的任意位置，并且标签要在同一个 div.

内居中

这是我的 html :

<div id="syllabe" class="container">
  <div id="syllabe-1" class="syllabe-container"><label for="toggle-syllabe-1">1</label></div>
  <div id="syllabe-2" class="syllabe-container"><label for="toggle-syllabe-2">2</label></div>
  <div id="syllabe-3" class="syllabe-container"><label for="toggle-syllabe-3">3</label></div>
  <div id="syllabe-4" class="syllabe-container"><label for="toggle-syllabe-4">4</label></div>
  <div id="syllabe-5" class="syllabe-container"><label for="toggle-syllabe-5">5</label></div>
</div>
<div id="syllabe2" class="container">
  blabla2
</div>
<div id="syllabe3" class="container">
  blabla3
</div>
<div id="syllabe4" class="container">
  <input type="checkbox" id="toggle-syllabe-1" onclick="toggle(this)">
</div>

CSS :

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
}

#syllabe {
  display: grid;
  grid-auto-flow: column;
}

.container {
  border: 1px solid black;
}

.syllabe-container {
  font-size: xx-large;
  background-color: aqua;
  border: 1px solid red;
}
.syllabe-container-selected {
  font-size: xx-large;
  background-color: yellow;
  border: 1px solid black;
}

#syllabe3 {
  height: 200px;
}

label {
  display: block;
}

和 JS（使用 JQuery）：

let toggle = (checkbox) => {
  if (checkbox.checked) {
    $("#syllabe-1").removeClass("syllabe-container").addClass("syllabe-container-selected")
  } else {
    $("#syllabe-1").removeClass("syllabe-container-selected").addClass("syllabe-container")
  }
}
$(function() {

})

结果：

并且在准确点击 1 之后：

我怎样才能（垂直和水平）居中数字 1 并能够单击黄色区域内的任意位置以激活复选框？

在容器上使用 margin: auto; 会减少标签 active space 并且没有达到我想要的效果：

这是一个包含所有内容的jsFiddle。

Answer 1

要实现您想要的效果，您只需修改 label 标记内的 CSS 属性...

label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

希望对您有所帮助

Answer 2

我不确定我是否理解正确。

这是您的https://jsfiddle.net/3bp4xtvj/16/，稍作改动。

为了使 div 中的数字居中，我建议您将 display: flex 与 justify-content: center; 和 align-items: center; 一起使用。

我在第一个 div 中添加了一个新功能和一个隐藏的复选框来为您提供思路。

让居中标签填满整个父级 div

Have a centered label fill the whole parent div

html

css

checkbox

jquery

centering