CSS에서 ul을 중앙에 배치하는 방법

오늘은 ul의 중심을 조정할 때 약간의 어려움을 겪었습니다. 예전에는 ul을 사용할 때 수직이 아닌 수평으로 정렬하기 위해 float:left 속성을 사용했습니다. 링크의 경우 div에서 ul이 중앙에 위치하지 않는 문제가 있었습니다. div에 style="text-align:center;"를 추가해도 ul이 중앙에 위치하지 않는 문제가 있었습니다. float:left를 사용하는 이유는 먼저 타일링을 하기 위해서입니다. float 속성을 사용하는 대신 ul 스타일에 display:inline을 사용할 수 있습니다. div에서 ul 목록을 중앙에 표시합니다.

1 원래 코드가 다음과 같다고 가정해 보겠습니다.

<div id="links" style="border:1px solid red;">
<ul>
    <li><a href="#">link111111</a></li>
    <li><a href="#">link2222</a></li>
    <li><a href="#">link33333</a></li>
    <li><a href="#">link44444</a></li>
    <li><a href="#">link555555</a></li>
</ul>
</div>

2. (ul에서는 list-style-type:none을 사용합니다.) 아래 표시된 대로

<div id="links" >
<ul style="border:1px solid red;list-style-type:none;">
    <li><a href="#">link111111</a></li>
    <li><a href="#">link2222</a></li>
    <li><a href="#">link33333</a></li
    <li><a href="#">link44444</a></li>
    <li><a href="#">link555555</a></li>
</ul>
</div>

:

3을 사용합니다. li는 가로로 표시되고 ul은 아래 그림과 같이 div 중앙에 위치합니다(li는 style="display:inline;" 사용).

<style type="text/css">
#links {text-align:center;}
#links ul{border:1px solid red;list-style-type:none;}
#links ul li{
display:inline;
}
</style>
<div id="links" >
<ul>
    <li><a href="#">link111111</a></li>
    <li><a href="#">link2222</a></li>
    <li><a href="#">link33333</a></li
    <li><a href="#">link44444</a></li>
    <li><a href="#">link555555</a></li>
</ul>
</div>

아래 그림과 같이#🎜🎜 #

지금까지 ul의 li는 가로로 표시되었고, ul은 div의 중앙에 표시되었습니다.

위 내용은 CSS에서 ul을 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!