How to set position of label always in the middle of vertical align of input

Question

I have a label before input with float: right. How to set position of label always in the middle of vertical align of input?
My css is below:

label {
  width: 50px;
  text-align: right;
  display: inline-block;
}

input {
  float: right;
  height: 40px;
  width: 200px;
}

And This is my html:

<div id='parent'>
  <label id='caption'>Name</label>
  <input type='text'/>
</div>

score 0 · Answer 1 · answered Dec 20 '19 at 09:28

Do not use float for layout purposes. float has other use cases.

You can use flex on parent together with aling-items: center

See below

label {
  width: 20%;
  text-align: right;

}

input {
  height: 40px;
  width: 80%;
}

#parent {
  display: flex;
  align-items: center;
}

<div id='parent'>
  <label id='caption'>Name</label>
  <input type='text' />
</div>

1 Answers1