Html CSS中心菜单

我在这里寻找这个问题的解决方案，我尝试了许多不同的方法来解决它，但没有成功。我想我在试图让菜单水平对齐中央时遗漏了一些东西

HTML

---

将以下内容添加到

ul

ul {
    ...
    display: table;
    margin: 0 auto;
}

.clearfix:before，
.clearfix:之后{
显示：表格；
内容：“；
线高：0；
保证金：0自动；
}
.clearfix:之后{
明确：两者皆有；
}
.clearfix:之前，
.clearfix:之后{
显示：表格；
内容：“；
线高：0；
}
div{
显示：块；
}
身体，
P
分区，
李{
颜色：#333；
字体系列：“Roboto”，无衬线；
字体大小：13px；
字体风格：普通；
字体大小：正常；
}
保险商实验室{
填充：0；
显示：表格；
保证金：0自动；
列表样式：无；
}
.ty标签{
利润上限：4倍；
垂直对齐：底部对齐；
边框底部：1px实心#e7e7e7；
}
.ty-tabs\u列表{
垂直对齐：底部对齐；
}
.ty-tabs___项目。激活，
.tytabs.subtab.active{
背景：#fff；
}
.ty-tabs____项目，
.ty选项卡。子选项卡{
浮动：左；
垂直对齐：底部对齐；
空白：nowrap；
光标：指针；
边界半径：0；
边距：2×2×0；
填充：0 3px；
位置：相对位置；
}
.ty-tabs__;a，
.ty选项卡。子选项卡a{
显示：块；
利润率：8px20px20px；
高度：23px；
}
a{
字体系列：“Roboto”，无衬线；
字体大小：13px；
字体风格：普通；
文字装饰：无；
大纲：无；
光标：指针；
}

说明

功能

审查

试试这个代码在你的小提琴上很好用：-

ul{
填充：0；
保证金：自动；
列表样式：无；
最大宽度：300px；/*根据您的喜好*/
}

您需要更改css

*{margin:0；padding:0；}
.clearfix:之前，.clearfix:之后{
显示：表格；
内容：“；
线高：0；
}
.clearfix:之后{
明确：两者皆有；
}
.clearfix:之前，.clearfix:之后{
显示：表格；
内容：“；
线高：0；
}
div{
显示：块；
}
身体，p，分区，李{
颜色：#333；
字体系列：“Roboto”，无衬线；
字体大小：13px；
字体风格：普通；
字体大小：正常；
}
保险商实验室{
填充：0；
保证金：0；
列表样式：无；
}
.ty标签{
/*利润上限：4倍*/
垂直对齐：底部对齐；
边框底部：1px实心#e7e7e7；
}
.ty-tabs\u列表{
/*垂直对齐：底部对齐*/
文本对齐：居中；
}
.ty-tabs_uuitem.active、.ty-tabs.subtab.active{
背景：#fff；
}
.ty-tabs___项，.ty-tabs.subtab{
/*浮动：左*/
垂直对齐：底部对齐；
空白：nowrap；
光标：指针；
边界半径：0；
/*边距：2×2×0*/
填充：5px0；
/*位置：相对位置*/
显示：内联块；
}
.ty-tabs\uu a、.ty-tabs.subtab a{
显示：块；
利润率：8px20px20px；
高度：23px；
}
a{
字体系列：“Roboto”，无衬线；
字体大小：13px；
字体风格：普通；
文字装饰：无；
大纲：无；
光标：指针；
}

描述


特征


复习

仅添加以下内容

CSS

ul {
 display:table;
 padding: 0;
 margin: 0 auto;
 list-style: none;
}

更改您的CSS

    .ty-tabs {
    margin-top: 4px;
    vertical-align: bottom;
    border-bottom: 1px solid #e7e7e7;
    text-align:center;
}

.ty-tabs__list {
    vertical-align: bottom;
}

.ty-tabs__item.active, .ty-tabs .subtab.active {
    background: #fff;
}

.ty-tabs__item, .ty-tabs .subtab {
    display:inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    margin: 2px 2px 0 0;
    padding: 0 0 0 3px;
    position: relative;
}

---

您可以使用以下代码

 ul {
  display:table;
  padding: 0;
  margin: 0 auto;
  list-style: none;
 }

---

.ty-tabs__项-添加显示：内联块；删除：float.ty-tabs\uuu列表-添加文本对齐：中心此方法与显示：表格有什么区别；保证金：0自动；方法？这和显示有什么区别：内联块；文本对齐：居中；方法？这和显示有什么区别：内联块；文本对齐：居中；方法？

display:inline block

make

li

与inline block元素在一行中，并且

text align:center

在这种情况下使子元素（

li

）集中。你需要用谷歌搜索更多细节。这和显示有什么区别：内联块；文本对齐：居中；方法？这和显示有什么区别：内联块；文本对齐：居中；方法？

    .ty-tabs {
    margin-top: 4px;
    vertical-align: bottom;
    border-bottom: 1px solid #e7e7e7;
    text-align:center;
}

.ty-tabs__list {
    vertical-align: bottom;
}

.ty-tabs__item.active, .ty-tabs .subtab.active {
    background: #fff;
}

.ty-tabs__item, .ty-tabs .subtab {
    display:inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    margin: 2px 2px 0 0;
    padding: 0 0 0 3px;
    position: relative;
}

 ul {
  display:table;
  padding: 0;
  margin: 0 auto;
  list-style: none;
 }