페이지 매김을 구현하고 있으며 중앙에 배치해야합니다. 문제는 링크가 블록으로 표시되어야하므로 플로팅되어야한다는 것입니다. 그러나 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);
 }

(로 시작하는 줄을 제거하고로 시작하는 줄 -을 추가하십시오 +.)

.pagination {
  text-align: center;
}
.pagination a {
  + display: inline-block;
  width: 30px;
  height: 30px;
  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 -->

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에서는 블록 및 목록 항목 요소에서 작동하지 않습니다.

컨테이너 width를 px넣고 다음을 추가하십시오.

margin: 0 auto;

참조 .

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);
}

결과와 코드를 확인하십시오.

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 은 모른다 inline-block. 다음을 추가해야합니다.

display:inline;
zoom: 1;

스타일링에 추가

position:relative;
float: left;
left: calc(50% - *half your container length here);

* 컨테이너 너비가 50px이면 25px, 10em이면 5em입니다.

.pagination"text-align : center"를 왼쪽, 변형 및 상황에 따라 위치에 대해 2 ~ 3 개의 CSS 행 으로 바꿔서이를 수행 할 수도 있습니다 .

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.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 -->

<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

1 단계

원하는 두 개 이상의 div를 만들고 각각에 대해 100px와 같은 너비를 지정한 다음 왼쪽 또는 오른쪽으로 띄우십시오.

2 단계

그런 다음이 두 div를 다른 div로 변형하고 너비를 200px로 지정하십시오. 이 div에 여백 자동을 적용하십시오. 붐 그것은 꽤 잘 작동합니다. 위의 예를 확인하십시오.

그냥 추가

left:15%; 

내 CSS 메뉴에

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

센터링 트릭도 했어