Have a centered label fill the whole parent div

Question

I am using labels to check/uncheck hidden checkboxes. I need to be able to click anywhere within the div AND for the label to be centered within that same div.

Here is my 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;
}

and JS (using 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() {

})

And the result :

And after clicking exactly on the 1 :

How could I center (vertically and horizontally) the number 1 and be able to click anywhere within the yellow zone to activate the checkbox ?

Using margin: auto; on the container reduces the label active space and does not achieve what I want :

Here is a jsFiddle containing everything.

Please let me know more about your problem. You can draw the desired result in the Paint software. — Vương Hữu Thiện, Oct 08 '20 at 07:30
`How could I center (vertically and horizontally) the number 1 and be able to click anywhere within the yellow zone to activate the checkbox ?` What is unclear please ? — Chapo, Oct 08 '20 at 07:49

score 1 · Accepted Answer · answered Oct 08 '20 at 08:19

1

To achieve what you want, you have to just modify the CSS properties inside the label tag...

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

Hope this is helpful to you

answered Oct 08 '20 at 08:19

Partha Maity

156
4

Thks -exactly what I was looking for. – Chapo Oct 09 '20 at 00:09

score 0 · Answer 2 · answered Oct 08 '20 at 08:34

0

I'm not sure if I have understood you correctly.

Here is your https://jsfiddle.net/3bp4xtvj/16/ with a few changes.

To center the numbers inside the div I would recommend you to use display: flex with justify-content: center; and align-items: center;.

I added a new function and a hidden checkbox inside the first div to give you the idea.

answered Oct 08 '20 at 08:34

Florian Goebel

81
3

Thank you. This does the trick but I was hoping to keep my click event on the label as opposed to its container and just expand the "action zone" of the label to its parent. Any way to do that instead ? – Chapo Oct 08 '20 at 09:26
Hey, like Wovi answered before this should work the way you want it: ```css label { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } ``` Have a look: https://jsfiddle.net/2gb64895/2/ – Florian Goebel Oct 08 '20 at 10:15

Have a centered label fill the whole parent div

2 Answers2