중앙 페이지 매김

· 2017-09-14 (목) 16:09:27 · 2397

중앙 페이지 매김


67df4843d6389d9795a88ee2b5f34a58_1505372961_9992.PNG
 


페이지 매김을 중앙에 배치하려면 <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>


|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 17-10-11 조회 2,699
CSS 17-10-11 조회 2,701
HTML 17-10-07 조회 3,498
HTML 17-10-06 조회 3,354
CSS 17-09-29 조회 2,288
CSS 17-09-29 조회 2,654
CSS 17-09-29 조회 2,511
CSS 17-09-26 조회 4,046
CSS 17-09-26 조회 2,707
CSS 17-09-26 조회 1,916
CSS 17-09-22 조회 2,221
CSS 17-09-22 조회 2,388
CSS 17-09-22 조회 2,352
HTML 17-09-22 조회 4,771
CSS 17-09-21 조회 1,909
CSS 17-09-21 조회 2,039
CSS 17-09-21 조회 1,899
CSS 17-09-19 조회 1,938
CSS 17-09-19 조회 1,621
CSS 17-09-19 조회 1,482
CSS 17-09-18 조회 2,572
CSS 17-09-18 조회 2,367
CSS 17-09-18 조회 2,335
CSS 17-09-14 조회 2,398
CSS 17-09-14 조회 2,070
CSS 17-09-14 조회 2,124
CSS 17-09-11 조회 2,455
CSS 17-09-11 조회 2,303
CSS 17-09-11 조회 2,110
CSS 17-09-10 조회 1,970