해상도에 관계없이 내 hmenu를 센터링하는 방법은 무엇입니까?

-2

hmenu를 적절하게 중앙에 배치하는 방법을 파악하는 데 문제가 있습니다. 나는 주위를 수색했지만 CSS는 꽤 발전했다. 나는 지금처럼 메뉴 바 전체 화면을 원하지만, 메뉴 옵션은 (화면 해상도에 상관없이) 중앙에 위치해야합니다. 여기 www.sleepstudymo.com해상도에 관계없이 내 hmenu를 센터링하는 방법은 무엇입니까?

코드입니다 (죄송합니다 그것이 긴하지만 내가 복사 어떤 부분 몰랐다) : .sleep-nav를 들어

.sleep-nav 
{ 
    background: #00628F; 
    background: -webkit-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat; 
    background: -moz-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat; 
    background: -o-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat; 
    background: -ms-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat; 
    -svg-background: linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat; 
    background: linear-gradient(to bottom, #003B57 0, #0088C7 100%) no-repeat; 
    -webkit-border-radius:5px 5px 0 0; 
    -moz-border-radius:5px 5px 0 0; 
    border-radius:5px 5px 0 0; 
    border-bottom:1px solid #6BD0FF; 
    padding:12px 2px 0; 
    margin:20px auto 0; 
    position: relative; 
    z-index: 499; 
    text-align: left; 
} 

ul.sleep-hmenu a, ul.sleep-hmenu a:link, ul.sleep-hmenu a:visited, ul.sleep-hmenu a:hover 
{ 
    outline: none; 
    position: relative; 
    z-index: 11; 
} 

ul.sleep-hmenu, ul.sleep-hmenu ul 
{ 
    display: block; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style-type: none; 
} 

ul.sleep-hmenu li 
{ 
    position: relative; 
    z-index: 5; 
    display: block; 
    float: left; 
    background: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

ul.sleep-hmenu li:hover 
{ 
    z-index: 10000; 
    white-space: normal; 
} 

ul.sleep-hmenu:after, ul.sleep-hmenu ul:after 
{ 
    content: "."; 
    height: 0; 
    display: block; 
    visibility: hidden; 
    overflow: hidden; 
    clear: both; 
} 

ul.sleep-hmenu, ul.sleep-hmenu ul 
{ 
    min-height: 0; 
} 

ul.sleep-hmenu 
{ 
    display: inline-block; 
    vertical-align: bottom; 
    padding-left: 5px; 
    padding-right: 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

} 


.sleep-nav:before 
{ 
    content:' '; 
} 

.desktop .sleep-nav{ 
    width: 100%; 
    padding-left: 2px; 
    padding-right: 2px; 

} 

.sleep-hmenu-extra1 
{ 
    position: relative; 
    display: block; 
    float: left; 
    width: auto; 
    height: auto; 
    background-position: center; 
} 

.sleep-hmenu-extra2 
{ 
    position: relative; 
    display: block; 
    float: right; 
    width: auto; 
    height: auto; 
    background-position: center; 
} 

.sleep-hmenu 
{ 
    float: left; 
} 

.sleep-menuitemcontainer 
{ 
    margin:0 auto; 
} 
ul.sleep-hmenu>li { 
    margin-left: 9px; 
} 
ul.sleep-hmenu>li:first-child { 
    margin-left: 4px; 
} 
ul.sleep-hmenu>li:last-child, ul.sleep-hmenu>li.last-child { 
    margin-right: 4px; 
} 

ul.sleep-hmenu>li>a 
{ 
    -webkit-border-radius:12px 12px 0 0; 
    -moz-border-radius:12px 12px 0 0; 
    border-radius:12px 12px 0 0; 
    border:1px solid transparent; 
    border-bottom:none; 
    padding:0 21px; 
    margin:0 auto; 
    position: relative; 
    display: block; 
    height: 31px; 
    cursor: pointer; 
    text-decoration: none; 
    color: #FFFFFF; 
    line-height: 31px; 
    text-align: center; 
} 

.sleep-hmenu>li>a, 
.sleep-hmenu>li>a:link, 
.sleep-hmenu>li>a:visited, 
.sleep-hmenu>li>a.active, 
.sleep-hmenu>li>a:hover 
{ 
    font-size: 18px; 
    font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: none; 
    text-align: left; 
    text-shadow: 1.4px 1.4px 0 rgba(23, 23, 23, 0.82); 
} 

ul.sleep-hmenu>li>a.active 
{ 
    background: #6BD0FF; 
    background: -webkit-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: -moz-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: -o-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: -ms-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    -svg-background: linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: linear-gradient(to bottom, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    -webkit-border-radius:12px 12px 0 0; 
    -moz-border-radius:12px 12px 0 0; 
    border-radius:12px 12px 0 0; 
    border:1px solid #6BD0FF; 
    border-bottom:none; 
    padding:0 21px; 
    margin:0 auto; 
    color: #FFFFFF; 
    padding-bottom: 1px; 
    margin-bottom: -1px; 
    text-decoration: none; 
} 

ul.sleep-hmenu>li>a:visited, 
ul.sleep-hmenu>li>a:hover, 
ul.sleep-hmenu>li:hover>a { 
    text-decoration: none; 
} 

ul.sleep-hmenu>li>a:hover, .desktop ul.sleep-hmenu>li:hover>a 
{ 
    background: #6BD0FF; 
    background: -webkit-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: -moz-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: -o-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: -ms-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    -svg-background: linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    background: linear-gradient(to bottom, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat; 
    -webkit-border-radius:12px 12px 0 0; 
    -moz-border-radius:12px 12px 0 0; 
    border-radius:12px 12px 0 0; 
    border:1px solid #A6A6A6; 
    border-bottom:none; 
    padding:0 21px; 
    margin:0 auto; 
} 
ul.sleep-hmenu>li>a:hover, 
.desktop ul.sleep-hmenu>li:hover>a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 
ul.sleep-hmenu>li>a.active:hover { 
    padding-bottom: 0; 
    margin-bottom: 0; 
} 

ul.sleep-hmenu>li:before 
{ 
    position:absolute; 
    display: block; 
    content:' '; 
    top:0; 
    left: -9px; 
    width:9px; 
    height: 31px; 
    background: url('images/menuseparator.png') center center no-repeat; 
} 
ul.sleep-hmenu>li:first-child:before{ 
    display:none; 
} 

ul.sleep-hmenu li li a 
{ 
    background: #80D7FF; 
    background: transparent; 
    -webkit-border-radius:13px; 
    -moz-border-radius:13px; 
    border-radius:13px; 
    padding:0 8px; 
    margin:0 auto; 
} 
ul.sleep-hmenu li li 
{ 
    float: none; 
    width: auto; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

.desktop ul.sleep-hmenu li li ul>li:first-child 
{ 
    margin-top: 0; 
} 

ul.sleep-hmenu li li ul>li:last-child 
{ 
    margin-bottom: 0; 
} 

.sleep-hmenu ul a 
{ 
    display: block; 
    white-space: nowrap; 
    height: 29px; 
    min-width: 7em; 
    border: 0 solid transparent; 
    text-align: left; 
    line-height: 29px; 
    color: #00ABFA; 
    font-size: 16px; 
    font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
    text-decoration: none; 
    margin:0; 
} 

.sleep-hmenu ul a:link, 
.sleep-hmenu ul a:visited, 
.sleep-hmenu ul a.active, 
.sleep-hmenu ul a:hover 
{ 
    text-align: left; 
    line-height: 29px; 
    color: #00ABFA; 
    font-size: 16px; 
    font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
    text-decoration: none; 
    margin:0; 
} 

ul.sleep-hmenu ul li a:hover, .desktop ul.sleep-hmenu ul li:hover>a 
{ 
    background: #FFFFFF; 
    -webkit-border-radius:13px; 
    -moz-border-radius:13px; 
    border-radius:13px; 
    margin:0 auto; 
} 
.sleep-hmenu ul a:hover 
{ 
    text-decoration: none; 
    color: #7A7A7A; 
} 

.desktop .sleep-hmenu ul li:hover>a 
{ 
    color: #7A7A7A; 
} 

ul.sleep-hmenu ul:before 
{ 
    background: #E5F7FF; 
    -webkit-border-radius:13px; 
    -moz-border-radius:13px; 
    border-radius:13px; 
    border:1px solid #B3E7FF; 
    margin:0 auto; 
    display: block; 
    position: absolute; 
    content: ' '; 
    z-index: 1; 
} 
.desktop ul.sleep-hmenu li:hover>ul { 
    visibility: visible; 
    top: 100%; 
} 
.desktop ul.sleep-hmenu li li:hover>ul { 
    top: 0; 
    left: 100%; 
} 

ul.sleep-hmenu ul 
{ 
    visibility: hidden; 
    position: absolute; 
    z-index: 10; 
    left: 0; 
    top: 0; 
    background-image: url('images/spacer.gif'); 
} 

.desktop ul.sleep-hmenu>li>ul 
{ 
    padding: 12px 32px 32px 32px; 
    margin: -10px 0 0 -30px; 
} 

.desktop ul.sleep-hmenu ul ul 
{ 
    padding: 32px 32px 32px 14px; 
    margin: -32px 0 0 -9px; 
} 

.desktop ul.sleep-hmenu ul.sleep-hmenu-left-to-right 
{ 
    right: auto; 
    left: 0; 
    margin: -10px 0 0 -30px; 
} 

.desktop ul.sleep-hmenu ul.sleep-hmenu-right-to-left 
{ 
    left: auto; 
    right: 0; 
    margin: -10px -30px 0 0; 
} 

.desktop ul.sleep-hmenu li li:hover>ul.sleep-hmenu-left-to-right { 
    right: auto; 
    left: 100%; 
} 
.desktop ul.sleep-hmenu li li:hover>ul.sleep-hmenu-right-to-left { 
    left: auto; 
    right: 100%; 
} 

.desktop ul.sleep-hmenu ul ul.sleep-hmenu-left-to-right 
{ 
    right: auto; 
    left: 0; 
    padding: 32px 32px 32px 14px; 
    margin: -32px 0 0 -9px; 
} 

.desktop ul.sleep-hmenu ul ul.sleep-hmenu-right-to-left 
{ 
    left: auto; 
    right: 0; 
    padding: 32px 14px 32px 32px; 
    margin: -32px -9px 0 0; 
} 

.desktop ul.sleep-hmenu li ul>li:first-child { 
    margin-top: 0; 
} 
.desktop ul.sleep-hmenu li ul>li:last-child { 
    margin-bottom: 0; 
} 

.desktop ul.sleep-hmenu ul ul:before 
{ 
    border-radius: 13px; 
    top: 30px; 
    bottom: 30px; 
    right: 30px; 
    left: 12px; 
} 

.desktop ul.sleep-hmenu>li>ul:before 
{ 
    top: 10px; 
    right: 30px; 
    bottom: 30px; 
    left: 30px; 
} 

.desktop ul.sleep-hmenu>li>ul.sleep-hmenu-left-to-right:before { 
    right: 30px; 
    left: 30px; 
} 
.desktop ul.sleep-hmenu>li>ul.sleep-hmenu-right-to-left:before { 
    right: 30px; 
    left: 30px; 
} 
.desktop ul.sleep-hmenu ul ul.sleep-hmenu-left-to-right:before { 
    right: 30px; 
    left: 12px; 
} 
.desktop ul.sleep-hmenu ul ul.sleep-hmenu-right-to-left:before { 
    right: 12px; 
    left: 30px; 
}

출처

2016-12-15 Don Sides

스택 오버플로에 오신 것을 환영합니다! 코드 도움말을 찾는 질문에는 질문 자체에 ** ** [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09)의 코드를 재현하는 데 필요한 ** 가장 짧은 ** 코드가 포함되어야합니다./introduction-runnable-javascript-css-and-html-code-snippets /). [** 최소, 완전하고 검증 가능한 예제를 만드는 방법 **] (http://stackoverflow.com/help/mcve) –

이 text-align: center을 설정 - 메뉴는 인라인입니다 -block 요소가 있으므로 텍스트처럼 가운데 정렬되고 두 번째로 (ul.sleep-hmenu)을 제거하거나 none으로 설정해야합니다.

출처

2016-12-15 16:30:24 Joint

나는 이것을 시도했지만 float : left를 제거했을 때 수직으로 메뉴 옵션을 나열했다. 수평 대신에. 목록은 화면의 왼쪽에도있었습니다. –

좋아, 아마도 놓친 뭔가 : style.css line 542 'none'으로 float을 설정하고 428 줄이 'center'로 텍스트 정렬을 설정했습니다. – Joint

그게 효과가있었습니다. 라인 번호가 도움이되었습니다. 나는 ul.sleep-hmenu를 none으로 변경할 필요가 없었습니다. 그것은 누구도 필요가없는 .sleep-hmenu였습니다. 도와 주셔서 감사합니다. 매우 감사! –

이것은 내가이 일을 얻기 위해 무슨 짓 :

ul.sleep-hmenu { 
width: 100%; 
display: block; 
text-align: center; 
} 

ul.sleep-hmenu li { 
/*-Remove Float: left;-*/ 
}

당신은 어떤 질문이 있으면 알려주세요.

출처

2016-12-15 16:42:11 oompahlumpa

왼쪽 플로트를 제거하면 메뉴 옵션이 세로로 나열됩니까? (지금처럼 수평으로 유지하는 대신 ..... 중심으로 바 꾸었습니다 ..... –

하위 항목에 대해'display : inline;'을 시도하면 왼쪽으로 떠 다니는 것과 같은 효과를 얻을 수 있습니다. – oompahlumpa

해상도에 관계없이 내 hmenu를 센터링하는 방법은 무엇입니까?

답변

관련 문제