Search  &  Category

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; 값을 줍니다.

 

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

감사합니다.

 

 




Comments

지나가던사람

지나가던사람

2016.10.31 15:07 신고

정말 감사합니다. ^^

수정/삭제 댓글쓰기

http:///715#comment11093878

잉어

잉어

2017.07.17 16:58 신고

덕분에 해결했어여 진짜 감사합니다

수정/삭제 댓글쓰기

http:///715#comment11255906

j

j

2017.10.17 12:43 신고

좋은 정보 감사합니다~!

수정/삭제 댓글쓰기

http:///715#comment11303658

개인 정보(이메일) 등을 노출 시에는 비밀글로 해 주세요. 여러분의 정보는 소중하니깐요.