Nirmal Patel Nirmal Patel - 5 months ago 76
CSS Question

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?

Answer

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