如何实现TMC文本在openbtn按钮内垂直居中对齐？

当前导航栏样式：

问题："TMC"文本（对应#header元素）与openbtn按钮对齐效果差，给#header设置margin-top等属性无效果。

问题原因 #

#header和openbtn都设置为display: inline，而行内元素不支持垂直方向的margin/padding调整，所以margin-top无法生效。

修复方案 #

方案1：使用vertical-align属性对齐

直接为两个元素添加垂直对齐属性，快速实现居中：

#header{
  display: inline;
  vertical-align: middle; /* 添加垂直居中对齐 */
}
.openbtn {
  display: inline;
  font-size: 10px;
  cursor: pointer;
  background-color: black;
  color: white;
  border: none;
  padding: 0px 7px;
  vertical-align: middle; /* 与文本保持同一对齐线 */
  margin-top: 0; /* 移除无效的margin-top */
}
.navbar{
  margin-left: 10px;
  font-size: 22px;
  font-family: 'Playfair Display', serif;
  height: 56px;
}

方案2：使用Flexbox容器控制对齐（更推荐）

给父容器navbar添加Flex布局，自动实现子元素垂直居中，同时支持更灵活的布局调整：

.navbar{
  margin-left: 10px;
  font-size: 22px;
  font-family: 'Playfair Display', serif;
  height: 56px;
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 垂直方向居中 */
  gap: 10px; /* 可选：添加元素间的间距 */
}
#header{
  /* 无需再设置display: inline */
}
.openbtn {
  font-size: 10px;
  cursor: pointer;
  background-color: black;
  color: white;
  border: none;
  padding: 0px 7px;
  margin-top: 0; /* 移除无效的margin-top */
}

内容的提问来源于stack exchange，提问作者Gebblin