为什么文本在移动chrome中的顶部对齐，而在chrome桌面中的中间对齐？

Question

为什么文本在 mobile Chrome中与边框的顶部对齐，而在桌面 Chrome中却恰好位于边框的中间？

移动电话：

桌面

.topbar {
  max-width: 600px;
  font-size: 40px;
  margin: auto;
  border-radius: 10px;
}

.logomain {
  font-family: 'Luckiest Guy', cursive;
  font-size: 40px;
  color: yellow;
}

<div class="topbar">
  <a class="logomain">BOOKS & DVD</a>
  <a></a>
  <a></a>
</div>

Answer 1

尝试将display: flex;用于topbar类。这样，将更易于处理项目的对齐方式。希望这段代码对您有帮助

 .topbar {
    font-size: 40px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    }

.logomain {
    font-family: 'Luckiest Guy', cursive;
    font-size: 40px;
    color: yellow;
    }

  <div class="topbar">
      <a class="logomain">BOOKS & DVD</a>
      <a></a>
      <a></a>
  </div>

Answer 2

在移动chrome上显示此特定字体“ Luckyest Guy”的方式是错误的（或特有的）。我已经更改了字体，并且两台设备上的显示现在相同。