iOS 5.0 Safari not vertically centering placeholde

问题:

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?

回答1:

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

回答2:

For me there is only one solution that appears close to perfect in all browsers I tested (Chrome, FF, Safari (+iOS), IE10):

line-height: normal;

Solutions like line-height: 100% and line-height: 1; seem to be aligned towards the top of the input, especially in Chrome.

http://jsfiddle.net/5Vc3z/

Comparison:

http://jsfiddle.net/5Vc3z/1/

回答3:

You should use percentage for the line-height.

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>

回答4:

Assuming you are just trying to make the input field appear larger then you could use padding:

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

Also, your input field should be:

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

Edit

Sorry, took a little while. It appears that placeholder can be styled individually and / or inherit styles from the parent. Unfortunately there are quite a lot of styles that are not supported by Safari at this time.

The following blog has details about the styling techniques and which are / are not supported within certain browsers:

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

回答5:

I got stuck on this issue for a long time despite using

input::-webkit-input-placeholder { line-height:normal!important; }

It turns out the having a line-height in the input element by itself was breaking my input::webkit-input-placeholder line-height.

Solution extended:

I removed the line-height in my input style and it fixed my issue.