可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
Current Situation
On a simple website I have an input control with a fix height where I have a text with a certain font size. I want that text to show up vertically aligned in the middle of the input field. But even though I used a reset css (link here) and setting the -webkit-appearance to none it still is not centered.
You can see that for IE the padding at the top is higher, for iOS it is even worse. There are 12 more pixels padding.
Some Code
HTML:
<!-- time --> <input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>
CSS:
.meeting-time { margin: 0; padding: 0; width: 100px; height: 37px; text-align: center; font-family: "roboto",sans-serif; font-style: normal; font-size: 37px; font-weight: 300; background: yellow; vertical-align: middle; -webkit-appearance: none; }
Actual Question
How can I have a text field where the text is vertically aligned for all browsers.
I know this has been asked a couple of times already, but the solutions proposed didn't work until now. It's probably something trivial that I miss.
回答1:
UPDATE
Took @scooterlord's advice about removing height and it fixed 90% of the problem. The 10% was still that 4px offset using iOS which was the same issue with my first solution. The difference is, with height no longer specified, I was able to add 4px padding-top to align iOS and it wasn't pushing the font on the desktop browsers. So basically:
- Remove height
- Add
padding-top: 4px;
See Snippet 2 and/or CODEPEN
OLD
There were some changes that were more for aesthetics than for cross-browser compatibilty of the changes that have significant importance they are denoted with a
IE11 SNIPPET 1
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet"> <input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px;" value="00:00" />
SNIPPET 2
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet'> <main> <hr/> <header> <hgroup> <h6>Original Code</h6> <h5>Example 1</h5> </hgroup> </header> <hr/> <input type="text" class="ex1Time" value="00:00"> <input type="text" class="ex1Time" value="07:22"> <input type="text" class="ex1Time" value="11:11"> <input type="text" class="ex1Time" value="12:34"> <hr/> <header> <hgroup> <h6 style='display:table-row'>Font dependent lengths are measured in ch units</h6> <h6 style='display:table-row;width:400px'>4 inputs Within .ex2Align</h6> <h6> </h6> <h5>Example 2</h5> </hgroup> </header> <hr/> <input type="text" class="ex2Time" value="00:00"> <input type="text" class="ex2Time" value="07:22"> <input type="text" class="ex2Time" value="11:11"> <input type="text" class="ex2Time" value="12:34"> <hr/> <header> <hgroup> <h6 style='display:table-row'>Using Arial instead of Roboto</h6> <h6 style='display:table-row;width:400px'>4 inputs Within .ex3Align</h6> <h6> </h6> <h5>Example 3</h5> </hgroup> </header> <hr/> <input type="text" class="ex3Time" value="00:00"> <input type="text" class="ex3Time" value="07:22"> <input type="text" class="ex3Time" value="11:11"> <input type="text" class="ex3Time" value="12:34"> <hr/> </main>
回答2:
The issue is caused by the combination of the input field's height attribute in combination with the font. Removing the height properly centers the text inside the input field.
This is probably due to the fact that there are characters that grow beneath the 00:00 baseline, like for example letters p,q,etc, so the vertical center of the font is below the "00:00" vertical center. The font size includes the boundaries that expand on top of the font size. Check the top and bottom bearing lines in the image below:
As a solution I would remove the height and use a font-size that produces a total of the wanted height.
Also as a side-note, a 37px input field also includes 2px of border-size (1px top border and 1px bottom border) so using a 35px font-size would be more appropriate to your example.
回答3:
Have you tried using line-height?
.meeting-time { margin: 0; padding: 0; width: 100px; height: 37px; line-height:37px; text-align: center; font-family: "roboto",sans-serif; font-style: normal; font-size: 37px; font-weight: 300; background: yellow; vertical-align: middle; -webkit-appearance: none; }
<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>
I added line-height to your CSS. Try the above and see how it goes.
回答4:
Remove your height and using padding instead but with ems
