Html 如何将导航栏与中心对齐

我想知道如何将导航栏内容对齐到中心，下面是我正在使用的代码。事实上，我不知道代码有什么问题。如果您能提供帮助，我们将不胜感激

---

将

显示：内联块

赋予

li

和

文本对齐：居中；填充：0至
ul
标签


.tg navigationarea{
宽度：100%；
浮动：左；
位置：相对位置；
背景：#f7f7f7；
}
.tg导航{
z指数：2；
浮动：左；
文本转换：大写；
字体：400 13px/40px“开放式Sans”，Arial，Helvetica，Sans serif；
}
.tg导航{
宽度：100%；
浮动：左；
填充：0；
行高：继承；
}
.tg导航ul{
保证金：0；
列表样式：无；
行高：继承；
}
.tg导航>ul{
宽度：100%；
浮动：左；
文本对齐：居中；
填充：0；
}
李国宝先生{
行高：继承；
列表样式类型：无；
}
li.菜单项有孩子{
位置：相对位置；
}
li.menu-item-has-mega-menu{
位置：静态；
}
li.menu-item-has-children>a：在，
li.menu-item-has-mega-menu>a：之前{
排名：0；
右：10px；
内容：'\f107'；
位置：绝对位置；
字体大小：继承；
行高：继承；
字体系列：“FontAwesome”；
}
.子菜单li.菜单项-has-children>a:after{
排名：0；
右：10px；
内容：'\f105'；
位置：绝对位置；
字体大小：继承；
行高：继承；
字体系列：“FontAwesome”；
}
.tg导航ul li.子菜单li.current-菜单项>a{
颜色：#333；
}
.tg导航ul li.子菜单li.current-菜单项>a:之前{
身高：100%；
}
.tg导航>ul>li{
显示：内联块；
}
.tg导航ul li a{
颜色：#666；
显示：块；
填充：0 25px；
位置：相对位置；
行高：继承；
}
.tg导航>ul>li>a{
颜色：#333；
z指数：2；
}
.tg navigation>ul>li:last child>。子菜单{
右：0；
左：自动；
}
.tg navigation>ul>li:last child>.sub menu.sub menu{
右：100%；
左：自动；
}

















给
显示：内联块
到
li
和
文本对齐：居中；填充：0至
ul
标签


.tg navigationarea{
宽度：100%；
浮动：左；
位置：相对位置；
背景：#f7f7f7；
}
.tg导航{
z指数：2；
浮动：左；
文本转换：大写；
字体：400 13px/40px“开放式Sans”，Arial，Helvetica，Sans serif；
}
.tg导航{
宽度：100%；
浮动：左；
填充：0；
行高：继承；
}
.tg导航ul{
保证金：0；
列表样式：无；
行高：继承；
}
.tg导航>ul{
宽度：100%；
浮动：左；
文本对齐：居中；
填充：0；
}
李国宝先生{
行高：继承；
列表样式类型：无；
}
li.菜单项有孩子{
位置：相对位置；
}
li.menu-item-has-mega-menu{
位置：静态；
}
li.menu-item-has-children>a：在，
li.menu-item-has-mega-menu>a：之前{
排名：0；
右：10px；
内容：'\f107'；
位置：绝对位置；
字体大小：继承；
行高：继承；
字体系列：“FontAwesome”；
}
.子菜单li.菜单项-has-children>a:after{
排名：0；
右：10px；
内容：'\f105'；
位置：绝对位置；
字体大小：继承；
行高：继承；
字体系列：“FontAwesome”；
}
.tg导航ul li.子菜单li.current-菜单项>a{
颜色：#333；
}
.tg导航ul li.子菜单li.current-菜单项>a:之前{
身高：100%；
}
.tg导航>ul>li{
显示：内联块；
}
.tg导航ul li a{
颜色：#666；
显示：块；
填充：0 25px；
位置：相对位置；
行高：继承；
}
.tg导航>ul>li>a{
颜色：#333；
z指数：2；
}
.tg navigation>ul>li:last child>。子菜单{
右：0；
左：自动；
}
.tg navigation>ul>li:last child>.sub menu.sub menu{
右：100%；
左：自动；
}

















其中一种方法是使用flexbox。添加

display: flex;
justify-content: center;

如果删除
宽度：100%
和
浮动：左
，导航栏将居中

更新的Fiddle:
实现这一点的方法之一是使用flexbox。添加

display: flex;
justify-content: center;

如果删除
宽度：100%
和
浮动：左
，导航栏将居中

更新的Fiddle:
将此css规则应用于元素

.tg-nav {
    z-index: 2;
    float: left;
    width: 100%;
    text-align: center;
    font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 auto;
}

将此css规则应用于元素

.tg-nav {
    z-index: 2;
    float: left;
    width: 100%;
    text-align: center;
    font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 auto;
}

要将此列表居中，只需添加以下内容：

.tg-nav {
  width: 100%:
}

.tg-navigation {
  width: 100%;
}

.tg-navigation ul {
  display: inline-block;
}

除此之外，所有的
浮动：left
是怎么回事？如果希望元素居中，我会避免使用
float:left
，当然
列表项除外

我更新了您的
以将此列表居中，您只需添加以下内容：

.tg-nav {
  width: 100%:
}

.tg-navigation {
  width: 100%;
}

.tg-navigation ul {
  display: inline-block;
}

除此之外，所有的
浮动：left
是怎么回事？如果希望元素居中，我会避免使用
float:left
，当然
列表项除外

我更新了您的
删除
float
s并添加：
ul{display:flex；justify content:center}
删除
float
s并添加：
ul{display:flex；justify content:center}