제가 쓰는 paging 마크업 및 CSS 입니다.

paging 마크업에 대해서는 예전부터 많은 토론이 있었고 CDK에서 관련내용을 확인하실수 있습니다. 저는 그래서 페이징 영역 자체는 버튼들과 페이져 부분을 리스트 목록으로 구분하고 페이져부분은 a 태그로만 구분하였습니다.
이를 css를 적용시키지 않은 마크업으로만 보면 다음과 같은 구조를 가지고 있습니다.

이제 CSS를 입힙니다. 전체를 inline요소로 만들어 가운데 정렬을 하고 버튼이 이미지기 때문에 img에 margin-top을 이용하여 이미지를 조정해줍니다. (물론 실제 적용할땐 이미지가 짤리는걸 방지하기위해 해당 상위 영역 엘레멘트가 어느정도의 padding은 가지고 있어야겠죠.)
그리고 paging 클래스에 적당한 width와 가운데 정렬을 주어서 paging 영역이 가운데고 오른쪽이나 왼쪽에 버튼이나 폼들이 있을때를 대비했습니다.
마지막으로 a 태그에 bar 이미지들을 오른쪽으로 넣어줍니다. CSS 적용 후 모습입니다.

마지막으로 페이져 중 마지막 숫자 오른쪽에 있는 성가신 bar를 없애주는 작업을 합니다. 최종 완성된 페이징 입니다.