如何使用 CSS 或 HTML 居中导航栏？

Posted 2023-03-05

【中文标题】如何使用 CSS 或 HTML 居中导航栏？

【英文标题】：How to center a navigation bar with CSS or HTML?

【发布时间】：2011-08-25 02:56:13

【问题描述】：

我无法将导航栏置于this page 的中心。

我尝试了nav margin: 0 auto; 和许多其他方法，但仍然无法居中。

【问题讨论】：

“使导航栏居中”到底是什么意思？

居中。只是子元素没有。

@David Thomas - 所以子元素导致主导航不居中？

不，因为您看不到菜单的background-color，孩子们导致菜单看起来没有居中。给菜单加个background-color，好像没问题。

【参考方案1】：

#nav ul 
    display: inline-block;
    list-style-type: none;

它应该可以工作，我在你的网站上测试过。

【讨论】：

我使用 Firebug 在您的站点中对其进行了测试，并且成功了。我可以给你看一个屏幕截图:)

实际上，它只适用于添加display: inline-block;。我又测试了一遍。

@morgar - 关于如何让子元素与主元素对齐的任何想法？

@morgar - 是的，比赛有一个子元素

inline-block 和居中有什么关系？有点荒谬，它有效。但确实如此。

【参考方案2】：

添加一些 CSS：

div#nav
  text-align: center;

div#nav ul
  display: inline-block;

【讨论】：

无论如何要让子元素与上面的单词对齐？

您可以在子元素上设置“text-align: left”。

【参考方案3】：

如果您的导航 <ul> 带有类 #nav 然后，您需要将该 <ul> 项目放入 div 容器中。使您的 div 容器具有 100% 的宽度。并将 text-align: 元素设置为 div 容器的中心。然后在您的<ul> 中将该类设置为具有 3 个特定元素： text-align:center;位置：相对；并显示：inline-block;

应该居中。

【参考方案4】：

只需添加：

*
    margin: 0;
    padding: 0;


nav
    margin: 0 auto;
    text-align: center;

【参考方案5】：

修复它的最佳方法我已经寻找代码或技巧如何使导航菜单居中并找到它适用于所有浏览器和我的朋友的真正解决方案;)

这是我的做法：

body 
    margin: 0;
    padding: 0;


div maincontainer 
    margin: 0 auto;
    width: ___px;
    text-align: center;


ul 
    margin: 0;
    padding: 0;


ul li 
    margin-left: auto;
    margin-right: auto;

别忘了设置doctype html5

【参考方案6】：

您的 nav div 实际上是正确居中的。但是里面的ul 不是。给 ul 一个特定的宽度和中心。

【参考方案7】：

您还可以使用 float 和 inline-block 使您的导航居中，如下所示：

nav li 
   float: left;

nav 
   display: inline-block;