Question

我需要将导航菜单置于中心位置。

您可以在以下位置查看我当前的菜单： www.financialconsultingcareers.com

以下是代码：

#hor_nav
{
    width: 100%;
    color: #000000;
    background: #f1f1f1;
    font-size: 20px;
    font-family: helvetica;
    font-weight: bold;
    height: 32px;
    z-index: 1000;
    Margin-top: -25px;
    border-bottom: 5px solid #254117; 
    box-shadow: 0px 5px 5px #888888;  
    margin-bottom: 25px;
    text-align: center;
}

#hor_nav UL
{
     margin: 0; 
}

#hor_nav LI
{
    list-style: none;
    display: center;
    float: left;
    margin-left: 3px;
    padding: 0;
    height: 32px;
    position: relative;
    text-transform: capitalize;
    text-align: justify;
    border-right: 1px solid #000001;

    <!--left: 2.5%;-->

}

div.#hor_nav, ul.#hor_nav li.active a 
{
    border-radius: 5px 5px 0 0;
    margin-right: 3px;
}

#hor_nav LI A
{
    display: inline-block;
    padding: 0 18px;
    line-height: 32px;
    margin-right: 3px;
    color: #000;
    font-weight: normal;
    font-size: 100%;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    text-align: justify;   
}

#hor_nav LI.active A
{
    border-radius: 4px 4px 0 0;
    background-color: #254117;
    color: #FFFFFF;
    font-weight: normal;
    padding-bottom: 4px;
    margin-top: -4px;       
}

#hor_nav li:last-child
{
    border-right: none;
}

#hor_nav LI A:hover, 
#hor_nav LI:hover A, 
#hor_nav LI.sfHover A
{
    background: #828282;
    color: #FFF;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    padding-bottom: 4px;
    margin-top: -4px;  
}

#hor_nav LI UL
{
    position: absolute;
    width: auto;
    left: -999em;
    margin-left: -4px;
    border-radius: 5px 5px 0 0;
}

#hor_nav LI UL UL
{
    margin: -31px 0 0 170px;
    border-radius: 5px 5px 0px 0px;
}

#hor_nav LI:hover UL UL, 
#hor_nav LI:hover UL UL UL, 
#hor_nav LI:hover UL UL UL UL, 
#hor_nav LI.sfHover UL UL, 
#hor_nav LI.sfHover UL UL UL, 
#hor_nav LI.sfHover UL UL UL UL
{
    left: -999em;
}

#hor_nav LI LI
{
    margin-left: -20px;
    padding: 0;
    font-size: 80%;
    height: auto;
    text-align: justify;
    background: #CCC;
    width: 225px;  
    border-radius: 0 0 0 0;
    box-shadow: 0px 3px 3px #888888;
}

#hor_navLI LI A, 
#hor_nav LI LI.active A, 
#hor_nav LI LI A:hover
{
    margin: 0;
    height: 30px;
    line-height: 30px;
    background: #828282;
    color: #FFF;
    border-radius: 5px 5px 5px 5px;
}

#hor_nav LI LI A, 
#hor_nav LI.active LI A
{
    font-weight: normal;
    border-radius: 5px 5px 0 0;
}

#hor_nav LI:hover UL, 
#hor_nav LI.sfHover UL
{
    left: 4px;
}

#hor_nav LI LI:hover UL, 
#hor_nav LI LI LI:hover UL, 
#hor_nav LI LI LI LI:hover UL, 
#hor_nav LI LI.sfHover UL, 
#hor_nav LI LI LI.sfHover UL, 
#hor_nav LI LI LI LI.sfHover UL
{
    left: 0;
}

#hor_nav LI
{
    list-style: none;
}

Answer 1

它并不能解决所有问题，但如果您向width: 700px添加固定宽度（例如<ul class="hor_nav">），菜单将居中（但是，背景不会持续到整个宽度页面，但你必须将背景设置为不同的元素，以支持它。

您必须指定固定宽度，以便margin-left: auto和margin-right: auto将元素置于中心位置。

没有position: center之类的东西。你可以放弃那个。

顺便说一句，我注意到当您调整页面大小时顶部徽标会缩小。谨防。 ;）

Answer 2

如果要使导航菜单居中，则需要为UL设置固定宽度值。这将改变您实现设计的方式。因此，您可能需要使用父div才能应用边框和背景颜色。

Answer 3

您必须指定一定的宽度。 100％不起作用......

示例：

#hor_nav {
   width: 500px;
   margin: 0 auto;

保证金：0自动会将其置于中心位置，但只有在您的元素有一定的宽度时它才会起作用。

将导航菜单与中心对齐

3 个答案: