css만으로 list (li) 의 중앙 정렬 하는 방법

CSS를 이용하여 list를 중앙에 정렬하는 방법입니다.

 

 

 

다음과 같은 HTML 코드가 있다고 예를 들겠습니다.

 

<div class="footer">
	<ul>
		<li>123 Fake St.</li>
		<li>Toronto, Ontario, Y1Y 1Y1</li>
		<li>416-555-5555</li>
		<li><a href="mailto:info@email.com">info@email.com</a></li>
	</ul>
</div>

 

 

만약 UL이나 OL이 div로 감싸지지 않았다면 감싸길 바랍니다.

이 리스트를 중앙에 정렬하는 CSS는 다음과 같습니다.

 

.footer {
	float: left;
	width: 100%;
	padding-right: 20px;
	padding-left: 25px;
	margin: 0 auto;
	text-align: center;
}

.footer ul {
	list-style: none;
}

.footer ul li {
	color: #808080;
	padding-bottom: 3px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	display:inline-block;
	padding-right: 10px;
}

 

 

위에서 중요한 부분이 float:left를 ul이나 li에 주지 않았다는 것입니다.

 

list의 부모 속성에 float:left 속성을 주고 text-align: center를 줍니다.

 

그리고 ul 속성에서 리스트 스타일을 제거합니다. list-style: none;

 

끝으로 li 속성에 display:inline-block; 값을 줍니다.

 

그럼 마법처럼 리스트가 중앙에 정렬되는 것을 볼 수 있을 것입니다.

감사합니다.