html - 有一个居中的标签填充整个父 div
问题描述
我正在使用标签来选中/取消选中隐藏的复选框。我需要能够单击 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;
会减少标签活动空间,并且无法达到我想要的效果:
这是一个包含所有内容的jsFiddle。
解决方案
要实现您想要的,您只需修改标签标签内的 CSS 属性...
label {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
希望这对你有帮助
推荐阅读
- javascript - Express.js - 待处理的承诺阻止并延迟 express 中的下一个 GET 请求(Node.js)
- gsap - 当移动响应视图设置为触摸模拟和在实际移动设备上时,Bulma 和 scrollTrigger 更改/中断
- python - 在 Plotly 的图例中对每个“图形维度”进行分组
- visual-studio-code - VScode:设备同步
- c++ - 整数计数{0}。我可以在 C++ 中使用花括号初始化变量吗?
- reactjs - 如何在reactjs中禁用eslint检查开发模式
- kotlin - IntelliJ 新 JavaFX 项目剂量工作 - InvalidModuleDescriptorException
- c# - 如果我按右 alt 这个隐藏,当我再次按程序显示和隐藏时
- gcc - 如何在 GCC 中启用所有 Intel Intrinsic 选项?
- hyperledger-fabric - scripts/createChannel.sh:第 40 行:osnadmin:找不到命令频道创建失败