메뉴에 주로 ul li를 많이 사용하는데 가운데 리스트 전체를 가운데 정렬하고싶을때 사용합니다.
문단만 가운데 정렬하기
목록 안에 있는 문단만 가운데 정렬할 때는 text-align 속성을 사용합니다.
ul {
text-align: center;
}이때, 목록 요소의 가로 크기는 변하지 않습니다.
목록 요소 자체를 가운데 정렬하기
목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다.
ul {
width: 300px;
margin-left: auto;
margin-right: auto;
}만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
ul {
display: table;
margin-left: auto;
margin-right: auto;
}목록 요소 자체가 가운데에 위치하는 것으로, 문단 정렬은 변하지 않습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
font-family: Consolas;
}
h1 {
font-size: 16px;
}
ul {
border: 1px solid #bcbcbc;
}
ul.a {
text-align: center;
}
ul.b {
width: 300px;
margin-left: auto;
margin-right: auto;
}
ul.c {
display: table;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1><code>text-align: center</code></h1>
<ul class="a">
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
<h1><code>width: 300px; margin-left: auto; margin-right: auto;</code></h1>
<ul class="b">
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
<h1><code>display: table; margin-left: auto; margin-right: auto;</code></h1>
<ul class="c">
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
</body>
</html>'웹 퍼블리싱 > Html' 카테고리의 다른 글
| 파비콘만들기 (홈페이지 상단 타이틀이미지) (0) | 2018.10.12 |
|---|---|
| 이미지맵 마우스 오버시 이미지 변경 태그 (0) | 2018.08.14 |
| 유튜브 동영상 z-index 값 조정하기 (0) | 2015.07.23 |
| [HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은? (0) | 2015.07.17 |
| 유튜브 동영상 자동 재생하기 (0) | 2015.07.17 |