标签略低于文字输入

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;
}

结果就是这样。 我该怎么做才能改变呢？ 我假设我需要向#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/

Answer 2

那这个呢？

#nickbox {
  display: flex; /* Change display on parent */
  border: none;
  padding: 5px;
  background-color: #fff;
  font-size: 2em;
}
#nickname {
  background-color: #44475a;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
  align-self: center; /* Apply to child */
}

Answer 3

使用位置：粘性； 就像这里： jsfiddle

#nicklabel{
    top: 13px;
    position: sticky;
}