알 수없는 너비의 정렬되지 않은 목록을 가로 중앙에 배치하는 방법은 무엇입니까?

알 수없는 너비의 정렬되지 않은 목록을 가로 중앙에 배치하는 방법은 무엇입니까?

---

다음과 같이 목록에 표시되는 바닥 글에 링크 세트가있는 것이 일반적입니다.

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

div # footer 내부의 모든 것이 수평으로 중앙에 배치되기를 원합니다. 문단이라면 쉽게 말할 수 있습니다 p { text-align: center; }.. 또는 폭을 안다면 <ul>그냥 말할 수 있습니다 #footer ul { width: 400px; margin: 0 auto; }.

그러나 고정 너비를 설정하지 않고 정렬되지 않은 목록 항목을 어떻게 중앙에 배치 <ul>합니까?

편집 : 설명-목록 항목은 아래가 아니라 서로 옆에 있어야합니다.

---

목록 항목 display: inline이 매우 쉬운 경우 해결책 은 다음과 같습니다.

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

그러나 여러 번 s display:block에서 사용해야합니다 <li>. 이 경우 다음 CSS가 작동합니다.

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }

---

아래 CSS를 사용하여 문제를 해결하십시오.

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

참고 : float:leftli에서 사용하지 마십시오 . Li가 왼쪽으로 정렬됩니다.

---

또 하나의 솔루션 :

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

그러면 ul은 확대 / 축소 텍스트의 경우 다음 줄로 이동하지 않습니다.

---

목록 항목이 이전 항목 아래에 있는지 또는 이전 항목의 오른쪽에 있는지 여부에 따라 다릅니다.

Home
About
Contact

또는

Home | About | Contact

간단하게 할 수있는 첫 번째 방법 :

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

두 번째는 다음과 같이 할 수 있습니다.

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }

---

목록을 div로 래핑하고 해당 div에 목록 대신 인라인 속성을 지정하십시오.

---

philfreo의 대답은 훌륭합니다. 완벽하게 작동합니다 (브라우저 간, IE 7 이상 포함). li 안에 앵커 태그에 대한 내 exp를 추가하십시오.

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; } 

참고 URL : https://stackoverflow.com/questions/1695175/how-to-horizontally-center-an-unordered-list-of-unknown-width