How do you center a label inside a div at the middle of a webpage?

August 4, 2023

I’ve spent quite some time trying to create a calculator-esque design for my simple JavaScript counter, but I can’t move the blue screen, represented by a label which displays the value, inside the counter’s pink body, which is represented by a div. I want the screen at the middle of the topmost part of the counter. Instead, I’m getting this:.

In case you can’t see my code for whatever reason; my CSS code for the counter_body and counter_label is as follows;

#counter_label{
  text-align: center;
  margin: auto;
  height: 200px;
  width: 300px;
  font-family: "Comic Sans MS";
  background-color: aqua;
  padding-left: 15%;
  padding-right: 15%;
}


#counter_body{
  color: red;
  border: 1px solid rgb(255, 0, 136);
  border-radius: 5%;
  padding-top: 20%;
  padding-left: 15%;
  padding-right: 15%;
  background: rgb(183, 154, 159);
  height: 200px;
  width: 300px;
  margin: auto;
}

<label id = "counter_label">0</label>

<div id="counter_body">
  <button type="button" id="increase">Increase</button>
  <button type="button" id="decrease">Decrease</button>
  <button type="button" id="reset">Reset</button>
  <button type="submit" id="submit">Submit</button>
</div>

<p id="counter_output"></p>

I’ve tried everything I can think of, being an absolute newbie coder, but I can’t push the blue label into place. Some help would be much appreciated.

>Solution :

Solution

Need to add display: block; to <label>:

#counter_label {
  display: block;
  text-align: center;
  margin: 0 auto;
  height: 200px;
  width: 300px;
  font-family: "Comic Sans MS";
  background-color: aqua;
  padding-left: 15%;
  padding-right: 15%;
}


#counter_body{
  color: red;
  border: 1px solid rgb(255, 0, 136);
  border-radius: 5%;
  padding-top: 20%;
  padding-left: 15%;
  padding-right: 15%;
  background: rgb(183, 154, 159);
  height: 200px;
  width: 300px;
  margin: auto;
}

<label id = "counter_label">0</label>

<div id="counter_body">
  <button type="button" id="increase">Increase</button>
  <button type="button" id="decrease">Decrease</button>
  <button type="button" id="reset">Reset</button>
  <button type="submit" id="submit">Submit</button>
</div>

<p id="counter_output"></p>

More information

List of HTML tags – MDN Docs
<label> – MDN Docs

In any case, I consider this incorrect: if the function of the <label> differs from the names of the <input> fields, it is better to use an appropriate tag instead. In most cases, we use <div>, but if you want to provide a heading, then the <h1>, etc. tags can also be helpful.