css3 div를 중앙화 할 수 없습니다

Question

페이지 중앙에 메뉴를 배치 할 수 없으며 모든 "margin : 0 auto;"을 삽입했습니다. 내가 할 수있는 모든 "텍스트 정렬 : 센터"및 사업부가 모두 분리되어, 뭔가의 아이가 아닌 .. 여기에 CSS 코드입니다 :

.more{ 
margin: 0 auto; 
position:relative; 
clear:both; 
font-size: 13px; 
padding: 20px 0px; 
text-transform: uppercase; 
width: 40%; 
height: 20%; 
} 
.more ul{ 
display:block; 
text-align:center; 
} 
.more ul li{ 
display: block; 
padding: 10px 3px; 
float:left; 
} 
.more ul li.selected a, 
.more ul li.selected a:hover{ 
background:#0099c5; 
color:#fff; 
text-shadow:none; 
font-weight:bold; 
} 
.more ul li a{ 
color:#555; 
float:left; 
background:#fff; 
width: 100%; 
padding: 8px 10px; 
-moz-box-shadow:1px 1px 2px #aaa; 
-webkit-box-shadow:1px 1px 2px #aaa; 
box-shadow:1px 1px 2px #aaa; 
} 
.more ul li a:hover{ 
background:#000; 
color:#fff; 
} 

그리고 여기에 HTML 코드입니다 :

   <div class="more"> 
       <ul> 
        <li class="selected"><a href="#">Homepage Blog</a></li> 
        <li><a href="#1">Cerca</a></li> 
        <li><a href="#2">Archivio</a></li> 
        <li><a href="#3">Tags</a></li> 
       </ul> 
      </div> 

어떻게 페이지의 중앙에 영구적으로 div를 만드시겠습니까? 나는 많은, 많은, 가능한 많은 움직임을 시도했다.

감사합니다.

p.s. 나도 넣으려고했다. <div align=center> ...my menu (class=more) list ...</div>

Answer 1

떠 다니는 요소에 margin : 0 auto를 사용할 수 없다는 것을 기억해야한다. 마진 0 오토

키는 :

가

1) 소자 디스플레이가 있어야 블록 2) 아니오 플로트 절대 또는 고정 된 위치를

.more{ 
float:left; 
clear:both; 
font-size: 13px; 
padding: 20px 0px; 
text-transform: uppercase; 
width: 100%; 
height: 20%; 
} 
.more ul{ 
display:block; 
text-align:center; 
margin:0 auto; 
} 
.more ul li{ 
display: inline-block; 
padding: 10px 3px; 
} 
.more ul li.selected a, 
.more ul li.selected a:hover{ 
background:#0099c5; 
color:#fff; 
text-shadow:none; 
font-weight:bold; 
} 
.more ul li a{ 
color:#555; 
background:#fff; 
width: 100%; 
padding: 8px 10px; 
-moz-box-shadow:1px 1px 2px #aaa; 
-webkit-box-shadow:1px 1px 2px #aaa; 
box-shadow:1px 1px 2px #aaa; 
} 
.more ul li a:hover{ 
background:#000; 
color:#fff; 
}