웹 페이지에서 페이지네이션(페이징) 버튼을 화면 중앙에 배치하고 싶다면 아래 예제 코드를 직접 실행해 보세요.
페이지네이션 중앙 정렬의 핵심 원리
원리는 매우 간단합니다. 페이지네이션을 감싸는 부모 요소에 text-align: center;를 적용하고, 페이지네이션 자체에는 display: inline-block;을 지정하면 됩니다. 이렇게 하면 인라인 블록 요소가 된 페이지네이션이 부모 컨테이너의 수평 중앙에 자동으로 정렬됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo1 {
text-align: center;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
transition: background-color 2s;
border: 1px solid orange;
font-size: 18px;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
.demo a:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.demo a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo1">
<div class = "demo">
<a href = "prev.html"><</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html" class = "active">Quiz3</a>
<a href = "quiz4.html">Quiz4</a>
<a href = "next.html">></a>
</div>
</div>
</body>
</html>
주요 CSS 속성 설명
- .demo1 { text-align: center; } — 페이지네이션을 감싸는 외부 컨테이너로, 내부 콘텐츠를 수평 중앙으로 정렬합니다.
- .demo { display: inline-block; } — 페이지네이션 블록을 인라인 블록으로 만들어 부모 요소의 text-align 설정에 반응하도록 합니다.
- .demo a — 각 페이지 링크에 패딩, 테두리, 색상 전환 효과(transition)를 적용해 버튼 같은 스타일을 완성합니다.
- .demo a.active — 현재 보고 있는 페이지를 강조하기 위해 주황색 배경, 흰색 글자, 둥근 모서리를 적용합니다.
- .demo a:hover:not(.active) — 마우스를 올렸을 때 활성 페이지를 제외한 나머지 링크의 배경색이 노란색으로 바뀌도록 처리합니다.
- :first-child / :last-child — 첫 번째와 마지막 링크의 바깥쪽 모서리만 둥글게 만들어 전체 페이지네이션이 하나의 그룹처럼 자연스럽게 보이도록 합니다.
이처럼 text-align: center와 inline-block 조합은 별도의 flexbox나 grid 없이도 페이지네이션을 손쉽게 중앙 정렬할 수 있는 가장 기본적이고 널리 쓰이는 방법입니다.