Html 如何将导航栏项目居中？

我是HTML和CSS编码新手，在尝试将导航栏中的项目居中时遇到问题。我尝试了很多方法来集中这些项目，但我找不到解决方案。我认为这与

边框样式有关：solid.l-triangle-bottom

和

.l-triangle-top

的code>，因为当我删除它时，所有项目都会移到左侧

有人能帮我吗

这是我的代码和一些解释

HTML

<div id="navigation_container">
   <div class="l-triangle-top"></div>
      <div class="l-triangle-bottom"></div>
         <div class="rectangle">
            <ul id="navigation">
               <li class="active"><a href="#">&#10029; Home</a></li>
               <li><a href="#">Location</a></li>
               <li><a href="#">Location</a></li>
               <li><a href="#">Our History</a></li>
               <li><a href="#">Gifts</a></li>
               <li><a href="#">Promotion</a></li>
               <li><a href="#">Gallery</a></li>
            </ul>
         </div>
         <div class="r-triangle-top"></div>
         <div class="r-triangle-bottom"></div>              
      </div>

然后我在主容器中有一个矩形容器，它是物品所在的位置

.rectangle {
    background: #e5592e;
    height: 62px; 
    position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    z-index: 500; 
    margin: 3em 0;
    text-align: center;

}

这些就是项目

#navigation li {
    list-style: none;
    display: block;
    float: left;
    margin: 0.1em 0.8em;

}

#navigation li a {
    text-shadow: 0 2px 1px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
    color: #f0f0f0;
    font-size: 1.6em;
    line-height: 60px;

}


#navigation li.active a:hover, #navigation li a:hover {
    margin-top: 2px;
    color: aqua;
}

我在矩形的每个位置都有一些三角形来产生胶带的效果

    .l-triangle-top {
    border-color: #d9542b transparent transparent;
    border-style: solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: 52px;
    left: -50px;

}

.l-triangle-bottom {
    border-color: transparent transparent #d9542b;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: 10px;
    left: -150px;
}


.r-triangle-top {
    border-color: #d9542b transparent transparent;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    right: -45px;
    top: -107px;
}

.r-triangle-bottom {
    border-color: transparent transparent #d9542b;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    top: -149px;
    right: -145px;
}

---

您的CSS中包含了以下内容，这些内容应该以它们为中心：

.rectangle{
文本对齐：居中；
}

但是，通过浮动此代码留下的项目，您将覆盖该样式：

#导航li{
浮动：左；
}

---

因此，如果删除

float:left样式，它应该可以工作。
试试这个：由于三角形，图标没有居中，所以你必须使它们成为绝对的

我还对html做了一些更改


#导航#u容器{
位置：固定；
宽度：1000px；
高度：200px；
排名：0；
左：50%；
利润上限：00px；
左边距：-500px；
}
.矩形{
/*背景：#e5592e*/
高度：62px；
位置：相对位置；
-moz盒阴影：0px 0px 4px rgba（0,0,0,0.55）；
-网络工具包盒阴影：0px 0px 4px rgba（0,0,0,0.55）；
盒影：0px 0px 4px rgba（0,0,0,0.55）；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
z指数：500；
保证金：3em0；
文本对齐：居中；
}
#导航李{
列表样式：无；
显示：内联块；；
边缘：0.1米0.8米；
}
#航行{
左侧填充：0；
位置：相对位置；
z指数：2；
背景：#e5592e；
}
#导航李a{
文本阴影：02px1pRGBA（0,0,0,0.5）；
显示：块；
文字装饰：无；
颜色：#f0；
字号：1.6em；
线高：60px；
}
#导航li.active a:悬停，#导航li a:悬停{
顶部：2个；
位置：相对位置；
颜色：浅绿色；
}
.l-三角形顶部{
边框颜色：#d9542b透明；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：绝对位置；
浮动：左；
顶部：4px；
左：-50px；
}
.l-三角底{
边框颜色：透明透明#d9542b；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：绝对位置；
浮动：左；
顶部：-37像素；
左：-49px；
}
.r-三角顶{
边框颜色：#d9542b透明；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：绝对位置；
浮动：对；
右：-50px；
排名：0；
}
r三角底{
边框颜色：透明透明#d9542b；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：绝对位置；
浮动：对；
顶部：-37像素；
右：-50px；
}










最小中心导航栏


正文{
保证金：0；
填充：0；
}
div{
背景：#7575；
边框顶部：2倍实心；
边框底部：2倍实心；
利润率：0.30px；
}
#导航{
身高：3.2米；
宽度：760px；
保证金：0自动；
列表样式：无；
}
#李海军{
浮动：左；
}
#导航a{
显示：块；
文本对齐：居中；
颜色：#000；
身高：3.2米；
宽度：150px；
线高：3.2米；
文字装饰：无；
左边距：-2px；
字体大小：粗体；
左边框：2倍实心#000；
右边框：2倍实心#000；
}
#导航a：悬停，
#导航a：聚焦{
背景：#5E9BD9；
颜色：#fff；
}









    .l-triangle-top {
    border-color: #d9542b transparent transparent;
    border-style: solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: 52px;
    left: -50px;

}

.l-triangle-bottom {
    border-color: transparent transparent #d9542b;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: 10px;
    left: -150px;
}


.r-triangle-top {
    border-color: #d9542b transparent transparent;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    right: -45px;
    top: -107px;
}

.r-triangle-bottom {
    border-color: transparent transparent #d9542b;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    top: -149px;
    right: -145px;
}