li 중심에서 ul까지 정렬하지 않음

Question

다음 코드에서는 li의 중심에 정확히 HELLO를 정렬하는 데 어려움을 겪고 있습니다. 그러나 왼쪽으로 이동하는 중입니다. 여기서는 해결책을 찾고 있지 않습니다. (이 코드를 통해 기능을 연습하고 이해하려고합니다.) 그러나 나는 왜 이런 일이 일어나는가에 관해서 가장 중요한 이유와 설명을 찾고 있습니다.

li의 왼쪽/오른쪽 여백을 자동으로 설정 했더라도. 그런데 왜 그것이 ul의 중심에 오지 않는 것입니까? 시각 보조를 위해, 나는 당신이 쉽게 그것의 정확한 위치를 발견 할 수 있도록 리튬에 대한 경계를 만들었습니다. 나는 ul의 너비를 줄이거 나 변경함으로써이 문제를 바로 잡을 수 있음을 안다. 그러나 텍스트가 자동으로 중앙에 정렬되도록 (수동으로 너비, 패딩 등을 조정하지 않고) 다른 방법이 있습니까? 또한 텍스트의 길이를 늘리거나 글꼴 크기를 변경하면 텍스트가 중앙에 정렬되기를 원합니다. ul는 기본적으로 padding-left을 가지고 있기 때문에

html body { 
 
\t height: 100%; 
 
\t width: 200px; 
 
} 
 

 
ul { 
 
\t background-color: rgba(0,0,0,1); 
 
\t height: 100px; 
 
\t width: 150px; 
 
} 
 

 
li { 
 
\t color: rgba(255,255,255,1); 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t list-style-type: none; 
 
\t width: 50px; 
 
\t text-align: center; 
 
\t border: thin solid rgba(255,255,255,1); 
 
\t float: left; 
 
}

<ul> 
 
<li>Hello</li> 
 
</ul>

Answer 1

그것은 약간 오른쪽으로이다; padding-left: 0;을 ul으로 설정하면 완전히 왼쪽으로 이동합니다. 그런 다음 li은 float: left;으로 왼쪽에 떠 있기 때문에 가운데에 정렬되지 않습니다. 그러면 설정 한 margin: auto;이 무시됩니다. float을 제거하면 li이 가운데에 위치하게됩니다.

나는 목록에 li's 더있을 것이기 때문에 당신이 float을 사용 추측 당신은 한 줄에 모두 원하고 ul 중심으로. 이 경우 내가 일반적으로 할 것은 :

ul { 
    text-align: center; 
} 

li { 
    display: inline-block; 
} 

예 : 내가 여기에 두 가지 문제보고 있어요

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<ul> 
 
    <li>Example1</li> 
 
    <li>Example2</li> 
 
    <li>Example3</li> 
 
</ul>

Answer 2

: 기본적으로

을 ul 요소 패딩 렌더링 왼쪽으로. 이것은 간격을 두어 오른쪽으로 밀어 넣은 요소 주위에 혼동을 일으키는 것을 여러분에게 알려주는 것입니다.

또한 <li> 요소에 float 속성을 추가해야합니다. 그것을 제거하면 <li>가 중앙에 위치해야합니다.

ul { 
    padding: 0; 
    background-color: rgba(0,0,0,1); 
    height: 100px; 
    width: 150px; 
} 

li { 
    color: rgba(255,255,255,1); 
    margin-right: auto; 
    margin-left: auto; 
    list-style-type: none; 
    width: 50px; 
    text-align: center; 
    border: thin solid rgba(255,255,255,1); 
} 

리튬의 플로트 문서의 흐름에서 그것을 받아 바로 왼쪽에있는 요소를 밀어