여백을 중심으로

Question

센터에 내비게이션을 만들려고합니다. 시도 :

#menu { 
     position: relative; 
     height: 44px; 
     width: auto; 
     padding-left:165px; 
    } 

그러나이 코드는 큰 화면에서 작동하지 않으며 축소됩니다. 그리고, 여기에

margin-left:auto; 
margin-right:auto; 

내가 마진 왼쪽 자동, 여백 오른쪽 자동차와 마진 0 픽셀 자동 을 시도했습니다

#menu { 
    position: relative; 
    height: 44px; 
    width: auto; 
    margin: 0px auto; 
} 
#menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
} 
#menu > ul { 
    position: relative; 
    display: block; 
    background: -moz-linear-gradient(#4F93EF, #1162CB); 
    background: -o-linear-gradient(#4F93EF, #1162CB); 
    background: -webkit-linear-gradient(#4F93EF, #1162CB); 
    /*border-radius: 15px 15px 0px 0px; 
    -moz-border-radius: 15px 15px 0px 0px; 
    -webkit-border: 15px 15px 0px 0px;*/ 
    width: 1020px; 
    z-index: 500; 
} 
#menu:after, 
#menu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#menu.align-right > ul > li { 
    float: right; 
} 
#menu.align-center ul { 
    text-align: center; 
} 
#menu.align-center ul ul { 
    text-align: left; 
} 
#menu > ul > li { 
    display: inline-block; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
#menu > ul > #menu-button { 
    display: none; 
} 
#menu ul li a { 
    display: block; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    text-decoration: none; 
} 
#menu > ul > li > a { 
    font-size: 14px; 
    font-weight: bold; 
    padding: 15px 20px; 
    color: #ffffff; 
    text-transform: uppercase; 
    -webkit-transition: color 0.25s ease-out; 
    -moz-transition: color 0.25s ease-out; 
    -ms-transition: color 0.25s ease-out; 
    -o-transition: color 0.25s ease-out; 
    transition: color 0.25s ease-out; 
} 
#menu > ul > li.has-sub > a { 
    padding-right: 32px; 
} 
#menu > ul > li:hover > a { 
    color: #b6b6b6; 
} 
#menu li.has-sub::after { 
    display: block; 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
} 
#menu > ul > li.has-sub::after { 
    right: 15px; 
    top: 20px; 
    border: 5px solid transparent; 
    border-top-color: #ffffff; 
} 
#menu > ul > li:hover::after { 
    border-top-color: #b6b6b6; 
} 
#indicatorContainer { 
    position: absolute; 
    height: 12px; 
    width: 100%; 
    bottom: 0px; 
    overflow: hidden; 
    z-index: -1; 
} 
#pIndicator { 
    position: absolute; 
    height: 0; 
    width: 100%; 
    border: 12px solid transparent; 
    border-top-color: #0053a6; 
    z-index: -2; 
    -webkit-transition: left .25s ease; 
    -moz-transition: left .25s ease; 
    -ms-transition: left .25s ease; 
    -o-transition: left .25s ease; 
    transition: left .25s ease; 
} 
#cIndicator { 
    position: absolute; 
    height: 0; 
    width: 100%; 
    border: 12px solid transparent; 
    border-top-color: #0053a6; 
    top: -12px; 
    right: 100%; 
    z-index: -2; 
} 
#menu ul ul { 
    position: absolute; 
    left: -9999px; 
    top: 70px; 
    opacity: 0; 
    -webkit-transition: opacity .3s ease, top .25s ease; 
    -moz-transition: opacity .3s ease, top .25s ease; 
    -ms-transition: opacity .3s ease, top .25s ease; 
    -o-transition: opacity .3s ease, top .25s ease; 
    transition: opacity .3s ease, top .25s ease; 
    z-index: 1000; 
} 
#menu ul ul ul { 
    top: 37px; 
    padding-left: 5px; 
} 
#menu ul ul li { 
    position: relative; 
} 
#menu > ul > li:hover > ul { 
    left: auto; 
    top: 44px; 
    opacity: 1; 
} 
#menu.align-right > ul > li:hover > ul { 
    left: auto; 
    right: 0; 
    opacity: 1; 
} 
#menu ul ul li:hover > ul { 
    left: 190px; 
    top: 0; 
    opacity: 1; 
} 
#menu.align-right ul ul li:hover > ul { 
    left: auto; 
    right: 190px; 
    top: 0; 
    opacity: 1; 
    padding-right: 5px; 
} 
#menu ul ul li a { 
    width: 150px; /*ukuran kotak*/ 
    border-bottom: 1px solid #eeeeee; 
    padding: 10px 20px; 
    font-size: 12px; 
    font-weight:bold; 
    color: #ffffff; 
    background: #006ad4; 
    -webkit-transition: all .35s ease; 
    -moz-transition: all .35s ease; 
    -ms-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
} 
#menu.align-right ul ul li a { 
    text-align: right; 
} 
#menu ul ul li:hover > a { 
    background: #0160bf; 
    color: #b6b6b6; 
} 
#menu ul ul li:last-child > a, 
#menu ul ul li.last > a { 
    border-bottom: 0; 
} 
#menu > ul > li > ul::after { 
    content: ''; 
    border: 6px solid transparent; 
    width: 0; 
    height: 0; 
    border-bottom-color: #b6b6b6; 
    position: absolute; 
    top: -12px; 
    left: 30px; 
} 
#menu.align-right > ul > li > ul::after { 
    left: auto; 
    right: 30px; 
} 
#menu ul ul li.has-sub::after { 
    border: 4px solid transparent; 
    border-left-color: #b6b6b6; 
    right: 10px; 
    top: 12px; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease; 
} 
#menu.align-right ul ul li.has-sub::after { 
    border-left-color: transparent; 
    border-right-color: #b6b6b6; 
    right: auto; 
    left: 10px; 
} 
#menu ul ul li.has-sub:hover::after { 
    border-left-color: #b6b6b6; 
    right: -5px; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
#menu.align-right ul ul li.has-sub:hover::after { 
    border-right-color: #b6b6b6; 
    border-left-color: transparent; 
    left: -5px; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 
    #menu { 
    width: auto; 
    } 
    #menu.align-center ul { 
    text-align: left; 
    } 
    #menu.align-right > ul > li { 
    float: none; 
    } 
    #menu ul { 
    width: auto; 
    } 
    #menu .submenuArrow, 
    #menu #indicatorContainer { 
    display: none; 
    } 
    #menu > ul { 
    height: auto; 
    display: block; 
    } 
    #menu > ul > li { 
    float: none; 
    } 
    #menu li, 
    #menu > ul > li { 
    display: none; 
    } 
    #menu ul ul, 
    #menu ul ul ul, 
    #menu ul > li:hover > ul, 
    #menu ul ul > li:hover > ul, 
    #menu.align-right ul ul, 
    #menu.align-right ul ul ul, 
    #menu.align-right ul > li:hover > ul, 
    #menu.align-right ul ul > li:hover > ul { 
    position: relative; 
    left: auto; 
    top: auto; 
    opacity: 1; 
    padding-left: 0; 
    padding-right: 0; 
    right: auto; 
    } 
    #menu ul .has-sub::after { 
    display: none; 
    } 
    #menu ul li a { 
    padding: 12px 20px; 
    } 
    #menu ul ul li a { 
    border: 0; 
    background: none; 
    width: auto; 
    padding: 8px 35px; 
    } 
    #menu.align-right ul ul li a { 
    text-align: left; 
    } 
    #menu ul ul li:hover > a { 
    background: none; 
    color: #b6b6b6; 
    } 
    #menu ul ul ul a { 
    padding: 8px 50px; 
    } 
    #menu ul ul ul ul a { 
    padding: 8px 65px; 
    } 
    #menu ul ul ul ul ul a { 
    padding: 8px 80px; 
    } 
    #menu ul ul ul ul ul ul a { 
    padding: 8px 95px; 
    } 
    #menu > ul > #menu-button { 
    display: block; 
    cursor: pointer; 
    } 
    #menu #menu-button > a { 
    padding: 14px 20px; 
    } 
    #menu ul.open li, 
    #menu > ul.open > li { 
    display: block; 
    } 
    #menu > ul.open > li#menu-button > a { 
    color: #fff; 
    border-bottom: 1px solid rgba(150, 150, 150, 0.1); 
    } 
    #menu ul ul::after { 
    display: none; 
    } 
    #menu #menu-button::after { 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 3px; 
    width: 22px; 
    border-top: 2px solid #ffffff; 
    border-bottom: 2px solid #ffffff; 
    right: 20px; 
    top: 15px; 
    } 
    #menu #menu-button::before { 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 3px; 
    width: 22px; 
    border-top: 2px solid #ffffff; 
    right: 20px; 
    top: 25px; 
    } 
    #menu ul.open #menu-button::after, 
    #menu ul.open #menu-button::before { 
    border-color: #fff; 
    } 
} 

내 전체 메뉴 바 코드는 여전히 작동하지 않습니다 어떤 솔루션을 시도했습니다 얘들 아?

Answer 1

상위 태그의 너비를 고정하고 style = "margin : 0px auto;"를 설정해야합니다.

Answer 2

margin-left 및 margin-right 잘못의 사용, 그것은해야한다 :

margin-left:auto; 
margin-right:auto; 

Answer 3

봅니다 왼쪽으로 사용하고 바로 자동으로

#menu { 
     position: relative; 
     height: 44px; 
     width: auto; 
     margin-left:auto; 
     margin-right:auto; 
     float:none !important; 
    } 

Answer 4

는 다음과 같은 시도 :

#menu { 
    position: relative; 
    height: 44px; 
    width: 500px; 
    right: 0; 
    left: 0; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: red; 
    color: white; 
    display: block; 
    } 

을 추신 : 상대 위치 대신 절대 위치 또는 고정 위치로 시도하십시오.