html - 标签略低于文本输入

Question

我在文本输入的左侧有一个标签，但看起来文本就在输入底部的下方。这是我的相关 HTML:

  <div id="nickbox">
    <label for="nickname" id="nicklabel">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" size="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" autofocus />
    <input type="button" id="nicknameconfirm" value="Set" />
  </div>

还有我的 CSS:

#nickbox {
  border: none;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  align-self:center;
  font-size: 2em;
}
#nickname {
  background-color: #44475a;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
}

This is what the results look like.我该怎么做才能改变这种情况？我假设我需要向#nicklabel 添加一些 CSS。谢谢。

Answer 1

将vertical-align: middle;放入#nickname

#nickname {
  background-color: #44475a;
  vertical-align: middle;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
}

http://jsfiddle.net/6xqgb0mu/