Nirmal Patel Nirmal Patel - 2 years ago 232
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download