stackdisplay stackdisplay - 1 month ago 10
CSS Question

Align text input vertically (dynamic height)

I have created a dynamic height input as follow which scales when browser resize. The second step that I would like to achieve is to vertically center the input text. I use

vertical-align: middle
but it seems that nothing changes.

What could I do to vertically align the input text



input{
background: lightgray;
vertical-align: middle;
width: 100%;
height: 30%;
padding-top: 30%;
}

<input type="text">




Answer

Since your input has a padding-top: 30%; you can just say padding: 15% 0; instead so your text will be dynamically centered within your <input>.

input{
  background: lightgray;
  width: 100%;
  padding: 15% 0;
}
<input type="text">

Comments