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

Question

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

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

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

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

Answer 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