Html 标签略低于文本输入

我在文本输入的左边有一个标签，但看起来文本只是略低于输入的底部。以下是我的相关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>

---

我能做些什么来改变这个？我想我需要给#nicklabel添加一些CSS。谢谢。

放置

垂直对齐：中间转换为
#昵称

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

这个怎么样

#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 */
}

使用部位：粘性；就像这里：

当我输入代码时，结果看起来非常好。您正在使用什么浏览器和/或系统进行测试？是否存在任何其他CSS（例如来自包含的库）？
#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 */
}

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