html - 尽管有媒体查询，但在 div 元素内居中(垂直和水平)和间隔 span 元素

Question

我开始研究 this最近;请参阅“联系工作”部分。使用我的台式机时它看起来居中 (1920 x 1080)，但是当我在我的笔记本电脑上使用它时它不居中并且更向右倾斜。我该怎么做才能使这个居中且每个单独的元素在同一行上并且每个元素之间有一些空间？

这是 HTML 部分

<div id="nav-base">
  <span id="contact">Contact</span>
  <span id="work">Work</span>
  <span id="about">About</span>
</div>

这是影响那些 <span> 的 CSS 部分 元素(我正在使用 media queries 进行响应式设计)

@media (min-width: 1281px) { 
.... /*Rest of the code for the site*/

/*
All values are the same for each media query
*/
#nav-base>span {
  color: rgb(197, 197, 197);
  margin: 0;
  padding: 0;
  margin-left: 375px;
  font-size: 36px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 90px;
}

Answer 1

我建议在 div 上使用 flex 并从 span 元素中删除左边距并添加一个较小的边距，例如:

#nav-base {
  display: flex;
  justify-content: center
  ...
}
#nav-base > span {
  margin: 0 20px;
  ...
}