使文本在文本输入字段内垂直对齐

Question

I'm using Foundation 6 framework to construct my pages. I have a separate style sheet called effects.css that I use to customize text and tables and inputs and such.

I actually have to style it, because without the custom styles the input fields are huge and grotesque. Must be some scaled styles in the foundation.css that are responsible.

I made a short, thin text input field, but the text inside doesn't seem to want to vertically line up correctly. The cursor blinks up and sort of half way out of the white text area.

Here's the html:

<form name="quick-connect" id="quick-connect" method="post" action="/ajax/quick-connect-action/" onsubmit="return false;">
    <span class="med-text white-text">Your name:</span><input type="text" name="name" id="name" class="small-input" />
    <span class="med-text white-text">Your phone #:</span><input type="text" name="number" id="number" class="small-input" />
    <input type="submit" name="submit" id="quick-connect-submit" value="Submit" />
    <input type="hidden" name="page" value="LCHG" />
</form>

Here's my attempt at css'ing the input fields:

input.small-input{
    width:10em;
    height:1em;
    line-height:1em;
    font-size:.9em;
    color:#000;
}

Here's what it looks like:

The blinking text cursor isn't vertically align within the text field.

Answer 1

It was a padding problem. I set the padding to 0 within the input style, and the text properly vertically aligns now.

input.small-input{
    width:10em;
    height:2em;
    line-height:2em;
    font-size:.8em;
    color:#000;
    padding:0;
}