Question 240889 in Html Question posted in
Some basic documentation can be found here.

Html – How to align to center label and input?

The input and option element aligns to the top and depenting the font-size of the label the gap at the bottom changes. How can I align both at the center no matter how big the text is?

.options label {
  font-size: 1.5rem;
}

.options {
  display: grid;
  grid-template: "a a" "b b";
  justify-content: center;
  align-content: center;
  gap: 1rem;
  padding: 5px;
}
<div class="options">
  <div>
    <label for="input1">input1</label><br />
  </div>

  <div>
    <input type="checkbox" id="input1" />
  </div>

  <div><label for="input2">input2</label><br /></div>

  <div>
    <input type="checkbox" id="input2" />
  </div>

  <div>
    <label for="option1">option1</label>
  </div>

  <div>
    <select id="option1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
</div>

Tags:

2

Answers


  1. 0

    align-content works only when the “flex-wrap:” property is set to wrap. Working with display: grid, you should try using align-items: center. Another solution could be to set the margin to auto on the y-axis. For instance: margin: auto 0

    Login or Signup to reply.
  2. 0

    Using align-self:center; on the divs around the inputs should center them. I have made the font bigger to help show this.

    .options label {
  font-size: 4rem;
}

.options {
  display: grid;
  grid-template: "a a" "b b";
  justify-content: center;
  align-content: center;
  gap: 1rem;
  padding: 5px;
}
    <div class="options">
  <div>
    <label for="input1">input1</label><br />
  </div>

  <div style="align-self:center;">
    <input type="checkbox" id="input1" />
  </div>

  <div><label for="input2">input2</label><br /></div>

  <div style="align-self:center;">
    <input type="checkbox" id="input2" />
  </div>

  <div>
    <label for="option1">option1</label>
  </div>

  <div style="align-self:center;">
    <select id="option1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search