CSS：如何将文本与高度调整的输入元素的基线对齐？

【问题标题】：CSS: How to align text to baseline of height-adjusted input element?CSS：如何将文本与高度调整的输入元素的基线对齐？
【发布时间】：2015-02-13 01:37:55
【问题描述】：

根据mozilla documentation，如果元素的显示设置为inline-block，我应该能够将输入元素中的文本设置为基线。

我有一堆 input 元素，我已经调整了它们的高度，但是现在当你尝试在其中输入时，文本会垂直居中显示。

如何让文本出现在 CSS 输入的底部（基线）？

http://jsfiddle.net/ay5y16ob/1/

【问题讨论】：

标签： html css

【解决方案1】：

文本输入不受垂直对齐属性的影响，但您可以使用顶部填充来伪造它：

.i, i:focus {
    display: inline-block;
    position: relative;
    vertical-align: text-bottom;
    border: none;
    border-bottom: 1px solid #A4A4A4;
    outline: none;
    outline: 0;
    width: 90%;
    padding-top: 60px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: arial;
    font-size: 100%;
}

jsFiddle example

【讨论】：