Search code examples
cssios5mobile-safarivertical-alignmentplaceholder

iOS 5.0 Safari not vertically centering placeholder in text box

I want to vertically center the text entered in input text boxes on the page.

Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari.

However; on iOS 5, Safari displays the typed text vertically centered... But the placeholder text and the cursor appear top aligned.

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

Anyone else facing this issue?

Solution

  • Setting line-height: 1; seems to fix this.