목록의 내용만 가운데 정렬하기
목록 안의 내용만 가운데 정렬할 때는
text-align
속성을 사용합니다.
<ul>
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
ul {
border: 1px solid #bcbcbc;
text-align: center;
}
목록 요소 자체를 가운데 정렬하기
목록 요소 자체를 가운데 정렬할 때는
margin
속성을 사용합니다.
<ul>, <ol>의 기본 가로 크기는 100%입니다.
가로 크기를 따로 지정해줘야 가운데로 정렬됩니다.
ul {
border: 1px solid #bcbcbc;
width: 200px;
margin: 0 auto;
}
목록 요소와 내용까지 같이 가운데로 정렬하려면
text-align:center 속성을 추가합니다.
ul {
width: 200px;
margin: 0px auto;
text-align: center;
}
만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면
display:table 속성을 사용합니다.
목록 요소 자체가 가운데에 위치하는 것으로, 문단 정렬은 변하지 않습니다.
ul {
display: table;
margin: 0 auto;
}