표시가있는 항목 가운데 맞추기 : 내부에 ul이있는

Question

안녕하세요 저는 각 목록 항목 내부에 정리되지 않은 목록이있는 목록 항목을 사용하는 가운데 맞춤 바닥 글을 설정하려고합니다. 내가 float : left를 사용하려고하면 왼쪽으로 서로 인라인됩니다. 그러나 더 이상 가운데에 놓이지 않습니다. 내가 현재 가지고있는 코드는 다음과 같습니다 CSS :

HTML

@charset "utf-8"; 
/* CSS Document */ 

* { 
margin:0; 
padding:0; 
} 
#box1 { 
margin:0 auto; 
background-color:#00FF66; 
} 
#mainList { 
list-style-type:none; 
text-align:center; 
display:inline; 
} 
.mainLI { 
display:inline; 
} 

: 즉 기본적으로 컨테이너의 100 % 폭 그것은 내용 beacuse에 의해 중앙에있어

<div id="box1"> 
<ul id="mainList"> 
    <li class="mainLI"> 
     <p>Title</p> 
     <ul class="subList"> 
      <li>item1</li> 
      <li>item2</li> 
      <li>item3</li> 
     </ul> 
    </li> 
    <li class="mainLI"> 
     <p>Title</p> 
     <ul class="subList"> 
      <li>item1</li> 
      <li>item2</li> 
      <li>item3</li> 
     </ul> 
    </li> 
</ul> 
</div> 

Answer 1

컨테이너 내에서 텍스트를 맞 춥니 다이다, 그러나 뜨는 경우는 적습니다.

어쨌든 내가 성취하고자하는 것을 이해하지 못합니까? 같은 시간에 목록 항목을 가운데에 놓으시겠습니까? 좀 더 정확하게 할 수 있니?

Answer 2

CSS : 중심에

@charset "utf-8"; 
/* CSS Document */ 

* { 
    margin:0; 
    padding:0; 
} 
#box1 { 
    margin:0 auto; 
    background-color:#00FF66; 
} 
#mainList { 
    list-style-type:none; 
    text-align:center; 
} 

#mainList li, .mainLI p { 
    display:inline; 
} 

Example

귀하의 문제는 당신이 아이들을 중심으로하는 부모 요소는 블록 요소 있어야한다는 사실에있다. MDN