CODEWITHSUNDEEP
htmlcss
MarkBurns
MarkBurns

Reputation: 468

Vertical Align text in an input field

I have an issue with vertical aligning text in an input box. I already tried display:table-cell. But when I enter space, instead of jumping a line, it goes to the right. Its for multiple lines, not just one line.

<div class="bodytext">
   <div class="vertical">
      <input type="text">
   </div>
</div>

Upvotes: 0

Views: 2614

Answers (3)

Dmytro Myronenko
Dmytro Myronenko

Reputation: 73

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

Upvotes: 0

Chirag S Modi
Chirag S Modi

Reputation: 419

try adding line-height or padding to input, or if you can share your css or make a fiddle.

Upvotes: 0

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

Is this what you mean? Now the text is vertically centered in the textbox.

.bodytext{
  width: 100%;
  height: 100px;
  background-color: #eee;
}
.bodytext .vertical input{
    height: 50px;
}
<div class="bodytext">
 <div class="vertical">
  <input type="text">
 </div>
</div>

Upvotes: 1

Related Questions