如何使仅占页面宽度一部分的导航栏居中？ [复制]

Posted 2023-03-05

【中文标题】如何使仅占页面宽度一部分的导航栏居中？ [复制]

【英文标题】：How do I center a navigation bar that is only part of the page width? [duplicate]

【发布时间】：2020-06-27 02:43:29

【问题描述】：

我正在尝试在我的网站上将导航栏居中。我遇到的困难是我不希望导航栏的宽度占据整个页面宽度，我希望导航栏的位置是固定的。

这是我正在尝试做的一个非常简单的示例：https://jsfiddle.net/de83m2zL/51/

如您所见，导航栏只是页面宽度的一部分，但并未居中。我的问题是，我怎样才能使它居中？

div#navbar 
  position: fixed;
  margin: 0 auto;
  width: 80%;
  background-color: #0050ca;


div ul 
  list-style-type: none;
  margin: 0;
  padding: 0;


div ul li 
  display: inline-block;
  margin-right: 10px;


div ul li a 
  color: white;


h1 
  margin-top: 40px;

<div id="navbar">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Blog</a></li>
  </ul>
</div>

<br>

<h1>
  Hello!
</h1>

【参考方案1】：

div#navbar 
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 80%;
  background-color: #0050ca;

您可以使用left: 50% 将其定位在屏幕的 50%，然后

使用transform: translateX(-50%)翻译-50%自身宽度的整个元素

---

注意：您可以查看此answer 以了解其工作原理。

【讨论】：

谢谢！它有效，但我有点好奇——如果我只是将元素定位到左侧 50%，然后将其向后移动，为什么结果与根本不定位它不同？

left: 50% 将元素定位到屏幕宽度的 50%，transform: translateX(-50%) 只需将元素滑动到元素宽度的 50%（其屏幕宽度与元素宽度）

@Gravitron 我编辑了我的答案以使其更清晰。

【参考方案2】：

不完全确定要居中，但是：

1.) 如果您想在（蓝色）ul 中居中 li 项目，请在 ul 上使用 text-align-center;

2.) 如果要将固定的 80% 宽 ul 在页面上居中，请使用 10% 的左右边距（= 100% 页面宽度的一半减去 ul 的 80% 宽度）：

div#navbar 
  position: fixed;
  margin: 0 10%;
  width: 80%;
  background-color: #0050ca;
  


div ul 
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;


div ul li 
  display: inline-block;
  margin-right: 10px;


div ul li a
  color: white;


h1 
  margin-top: 40px;

<div id="navbar">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Blog</a></li>
  </ul>
</div>

<br>

<h1>
Hello!
</h1>

【讨论】：

谢谢！我应该澄清一下，我想将蓝色框居中，但这有效。