페이지 매김을 구현하고 있으며 중앙에 배치해야합니다. 문제는 링크가 블록으로 표시되어야하므로 플로팅되어야한다는 것입니다. 그러나 text-align: center;그들에게는 효과가 없습니다. 왼쪽에 래퍼 div 패딩을 제공하면 얻을 수 있지만 모든 페이지에는 다른 수의 페이지가 있으므로 작동하지 않습니다. 내 코드는 다음과 같습니다.
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->아이디어를 얻으려면 내가 원하는 것 :
답변
를 제거 float하고 사용하면 inline-block문제가 해결 될 수 있습니다.
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}(로 시작하는 줄을 제거하고로 시작하는 줄 -을 추가하십시오 +.)
inline-block 요소가 원래 인라인 요소 인 한 IE6에서도 크로스 브라우저를 작동합니다.
quirksmode 에서 인용 :
인라인 블록은 인라인으로 배치되지만 (즉, 인접한 내용과 동일한 라인에) 블록으로 동작합니다.
이것은 종종 수레를 효과적으로 대체 할 수 있습니다.
이 값의 실제 사용은 인라인 요소에 너비를 제공하려는 경우입니다. 경우에 따라 일부 브라우저에서는 실제 인라인 요소에서 너비를 허용하지 않지만 표시로 전환하면 인라인 블록으로 너비를 설정할 수 있습니다.” ( http://www.quirksmode.org/css/display.html#inlineblock ).
로부터 W3C 사양 :
[inline-block]은 요소가 인라인 레벨 블록 컨테이너를 생성하게합니다. 인라인 블록 내부는 블록 상자로 형식화되고 요소 자체는 원자 인라인 레벨 상자로 형식화됩니다.
답변
몇 년 동안 나는 블로그에서 배운 오래된 트릭을 사용하기 때문에 그에게 크레딧을 줄 이름을 기억하지 못해 죄송합니다.
어쨌든 부동 요소를 중앙에 배치하면 작동합니다.
다음과 같은 구조가 필요합니다.
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>트릭은 컨테이너가 내용에 따라 너비를 변경하도록 부동 소수점을 제공합니다. 두 컨테이너에 상대 위치가 50 % 및 -50 % 인 위치의 문제입니다.
좋은 점은 이것이 크로스 브라우저이며 IE7 +에서 작동해야한다는 것입니다.
답변
수레를 센터링하는 것은 쉽습니다 . 컨테이너 스타일을 사용하십시오.
.pagination{ display: table; margin: 0 auto; }플로팅 요소의 여백을 변경하십시오.
.pagination a{ margin: 0 2px; }또는
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 나머지는 그대로 둡니다.
메뉴 나 페이지 매김과 같은 것을 표시하는 것이 가장 좋은 솔루션입니다.
강점 :
-
모든 요소 (블록, 목록 항목 등)에 대한 크로스 브라우저
-
간단
약점 :
- 모든 부동 요소가 한 줄에있을 때만 작동합니다 (일반적으로 메뉴에는 적합하지만 갤러리에는 적합하지 않음).
@ arnaud576875 인라인 블록 요소를 사용하면 페이지 매김에 앵커 (인라인) 만 있고 목록 항목이나 div가 없으므로 인라인 블록 요소를 사용하면 브라우저 간을 훌륭하게 사용할 수 있습니다.
강점 :
- 여러 줄 항목에 적용됩니다.
약점 :
-
인라인 블록 요소 사이의 간격 -단어 사이의 공백과 같은 방식으로 작동합니다. 컨테이너 너비 및 스타일링 여백 계산에 문제가 발생할 수 있습니다. 간격 폭은 일정하지 않지만 브라우저마다 다릅니다 (4-5 픽셀). 이 차이를 없애기 위해 arnaud576875 코드에 추가합니다 (완전히 테스트되지는 않음).
. 페이지 매김 {단어 간격 : -1em; }
. 페이지 매김 a {단어 간격 : .1em; }
-
IE6 / 7에서는 블록 및 목록 항목 요소에서 작동하지 않습니다.
답변
답변
Flex 사용
.pagination {
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->답변
가장 좋은 방법은 margin대신 사용 하는 것 같습니다 display.
즉 :
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}결과와 코드를 확인하십시오.
답변
text-align: center;
float: none;