중앙 페이지 매김
중앙 페이지 매김
페이지 매김을 중앙에 배치하려면 <div>와 같은 컨테이너 요소를 text-align:center
예
.center {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 2952 |
HTML
zencoding
|
| 2951 | |
| 2950 |
HTML
html table 2
|
| 2949 |
HTML
HTML Table 1
|
| 2948 |
HTML
HTML 파일 경로
|
| 2947 |
HTML
HTML <script> 태그
|
| 2946 |
HTML
Iframe 구문
|
| 2945 |
HTML
html 하이퍼링크2
|
| 2944 |
HTML
html 하이퍼링크 1
|
| 2943 |
HTML
HTML comment 태그
|
| 2942 | |
| 2941 | |
| 2940 | |
| 2939 |
HTML
짧은 인용문을위한 HTML
|
| 2938 |
HTML
HTML 서식 예제
|
| 2937 |
HTML
HTML 서식 요소
|
| 2936 | |
| 2935 |
HTML
HTML 줄 바꿈
|
| 2934 | |
| 2933 |
HTML
Headings 에 중요성
|
| 2932 |
HTML
HTML 스타일 속성
|
| 2931 |
HTML
HTML <pre> 요소
|
| 2930 |
HTML
HTML 줄 바꿈
|
| 2929 | |
| 2928 |
CSS
CSS 코멘트 삽입
|
| 2927 |
CSS
CSS 기본 문법
|
| 2926 |
HTML
HTML addr
|
| 2925 |
HTML
HTML 서식 요소
|
| 2924 |
기타
디바이스별 해상도
|
| 2923 |
HTML
HTML 이미지 img 태그
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기