어떻게 텍스트 정렬은 탐색 모음

Question

나는 순수 CSS로 드롭 다운 탐색 모음을 테스트하고 있습니다에 중심을 확인합니다. 50 %를, 오른쪽 : 텍스트 정렬 나던 그것은 단지 드롭 다운 텍스트를 정렬 작업, 왼쪽 50 % 예는 텍스트 중심을하지만, 네비게이션 바에는 늘 내 페이지의 폭을 커버합니다. 사용 오버 플로우를 해달라고하십시오 : 숨겨진는 표시되지 드롭 다운을 만들 것입니다

JSFiddle

내가 this 같은 텍스트를 만들고 싶어하지만, 오버 플로우의 난 드롭 다운을 볼 수 없습니다 때문에

CSS는 :

당신의 ul.dropdown li에서

ul.dropdown, ul.dropdown li, ul.dropdown ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown { 
    position: relative; 
    z-index: 597; 
    background-color: black; 
} 
ul.dropdown li { 
    float: left; 
    min-height: 1px; 
    line-height: 1.3em; 
    vertical-align: middle; 
} 
ul.dropdown li.hover, ul.dropdown li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
} 
ul.dropdown ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
} 
ul.dropdown ul li { 
    float: none; 
} 
ul.dropdown ul ul { 
    top: 1px; 
    left: 99%; 
} 
ul.dropdown li:hover > ul { 
    visibility: visible; 
} 
/* -- Base drop-down styling -- */ 
ul.dropdown { 
    font: normal 16px"Square", Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    width: 100%; 
} 
ul.dropdown li { 
    padding: 7px 0; 
    background-color: #000; 
    color: #fff; 
    line-height: normal; 
} 
ul.dropdown a:link, ul.dropdown a:visited { 
    color: #fff; 
    text-decoration: none; 
} 
ul.dropdown a:hover { 
    color: #005CE6; 
    text-decoration: none; 
} 
ul.dropdown a:active { 
    color: #fff; 
} 
/* -- level mark -- */ 
ul.dropdown ul { 
    width: 170px; 
    background-color: #333; 
    color: #fff; 
    font-size: 12px; 
    text-transform: none; 
    filter: alpha(opacity=90); 
    -moz-opacity: .9; 
    KhtmlOpacity: .9; 
    opacity: .9; 
} 
ul.dropdown ul li { 
    background-color: transparent; 
    color: #000; 
    filter: none; 
} 
ul.dropdown ul li.hover, ul.dropdown ul li:hover { 
    background-color: transparent; 
} 
ul.dropdown ul a:link, ul.dropdown ul a:visited { 
    color: #fff; 
} 
ul.dropdown ul a:hover { 
    color: #fff; 
    text-decoration: none; 
} 
ul.dropdown ul a:active { 
    color: #fff; 
} 
/* -- Supporting class `dir` -- */ 
ul.dropdown *.dir { 
    padding-right: 12px; 
    background-image: none; 
    background-position: 100% 50%; 
    background-repeat: no-repeat; 
} 
/* -- Base style extension -- */ 
ul.dropdown li a { 
    display: block; 
    padding: 7px 14px; 
} 
/* -- Base style override -- */ 
ul.dropdown li { 
    padding: 0; 
} 
/* -- Base style reinitiate: post-override activities -- */ 
ul.dropdown li.dir { 
    padding: 7px 20px 7px 14px; 
} 
ul.dropdown ul li.dir { 
    padding-right: 15px; 
} 
/* -- Custom -- */ 
ul.dropdown ul a { 
    padding: 4px 5px 4px 14px; 
    width: 151px; 
    /* Especially for IE */ 
} 
ul.dropdown ul a:hover { 
    background-color: #005CE6; 
} 
/* -- Drop-down open -- */ 
ul.dropdown li:hover > a.dir { 
    background-color: #2e2e2e; 
    color: #005CE6; 
} 
ul.dropdown ul li:hover > a.dir { 
    background-color: #76b900; 
    color: #fff; 
} 
html { 
    *overflow-x: hidden; 
} 
body { 
    padding: 0; 
} 
body, html { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
.wrapper { 
    min-height: 100%; 
    width: 100% 
    overflow: hidden; 
} 
.container { 
    padding: 50px; 
} 
.horizontal-centering { 
    position: relative; 
} 
.horizontal-centering > * > * { 
    float: left; 
    width: 100%; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
.horizontal-centering > * > * > * { 
    float: left; 
    position: relative; 
} 

Answer 1

제거 float: left;. 당신의 ul.dropdown 및 display: inline-block;에 text-align: center; 추가하여 ul.dropdown li

Fiddle Demo

ul.dropdown { 
    position: relative; 
    z-index: 597; 
    background-color: black; 
    text-align: center; 
} 
ul.dropdown li { 
    display: inline-block; 
    min-height: 1px; 
    line-height: 1.3em; 
    vertical-align: middle; 
}