Tôi đang thực hiện phân trang, và nó cần phải được tập trung. Vấn đề là các liên kết cần phải được hiển thị dưới dạng khối, vì vậy chúng cần được thả nổi. Nhưng sau đó, text-align: center;không làm việc trên chúng. Tôi có thể đạt được nó bằng cách cung cấp phần đệm div bên trái, nhưng mỗi trang sẽ có số lượng trang khác nhau, do đó sẽ không hoạt động. Đây là mã của tôi:

.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 -->

Để có được ý tưởng, những gì tôi muốn:

Xóa floats và sử dụng inline-blockcó thể khắc phục sự cố của bạn:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(xóa các dòng bắt đầu bằng -và thêm các dòng bắt đầu bằng +.)

.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 hoạt động trên nhiều trình duyệt, ngay cả trên IE6 miễn là phần tử ban đầu là một phần tử nội tuyến.

Trích dẫn từ quirksmode :

Một khối nội tuyến được đặt nội tuyến (nghĩa là trên cùng một dòng với nội dung liền kề), nhưng nó hoạt động như một khối.

điều này thường có thể thay thế hiệu quả phao:

Việc sử dụng thực sự của giá trị này là khi bạn muốn cung cấp một phần tử nội tuyến có chiều rộng. Trong một số trường hợp, một số trình duyệt không cho phép độ rộng trên phần tử nội tuyến thực, nhưng nếu bạn chuyển sang hiển thị: khối nội tuyến, bạn được phép đặt chiều rộng. ( http://www.quirksmode.org/css/display.html#inlineblock ).

Từ thông số W3C :

[block-inline] khiến một phần tử tạo ra một khối chứa cấp độ nội tuyến. Bên trong khối nội tuyến được định dạng dưới dạng hộp khối và chính phần tử được định dạng dưới dạng hộp cấp nguyên tử.

Vì nhiều năm tôi sử dụng một mánh khóe cũ mà tôi đã học được trong một số blog, tôi xin lỗi tôi không nhớ tên để cung cấp cho anh ta các khoản tín dụng.

Dù sao đến trung tâm các yếu tố nổi này sẽ hoạt động:

Bạn cần một cấu trúc như thế này:

    .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>

Thủ thuật là thả nổi trái để làm cho các container thay đổi chiều rộng tùy thuộc vào nội dung. Hơn là một vấn đề về vị trí: tương đối và còn lại 50% và -50% trên hai container.

Điều tốt là đây là trình duyệt chéo và nên hoạt động từ IE7 +.

Trung tâm phao là dễ dàng . Chỉ cần sử dụng kiểu cho container:

.pagination{ display: table; margin: 0 auto; }

thay đổi lề cho các phần tử nổi:

.pagination a{ margin: 0 2px; }

hoặc là

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

và để phần còn lại như nó là.

Đó là giải pháp tốt nhất để tôi hiển thị những thứ như menu hoặc phân trang.

Điểm mạnh:

• trình duyệt chéo cho bất kỳ yếu tố nào (khối, mục danh sách, v.v.)

• sự đơn giản

Những điểm yếu:

• nó chỉ hoạt động khi tất cả các phần tử nổi nằm trong một dòng (thường là ok cho các menu nhưng không phải cho các phòng trưng bày).

@ arnaud576875 Sử dụng các phần tử khối nội tuyến sẽ hoạt động rất tốt (trình duyệt chéo) trong trường hợp này vì phân trang chỉ chứa các neo (nội tuyến), không có mục danh sách hoặc div:

Điểm mạnh:

• làm việc cho các mặt hàng đa dòng.

Weknesses:

• khoảng cách giữa các thành phần khối nội tuyến - nó hoạt động giống như khoảng trắng giữa các từ. Nó có thể gây ra một số rắc rối khi tính toán chiều rộng của thùng chứa và lề kiểu dáng. Độ rộng khoảng cách không đổi nhưng đó là trình duyệt cụ thể (4-5px). Để loại bỏ khoảng trống này, tôi sẽ thêm vào mã arnaud576875 (chưa được kiểm tra đầy đủ):

  .pagination {khoảng cách từ: -1em; }

  .pagination a {khoảng cách từ: .1em; }

• nó sẽ không hoạt động trong IE6 / 7 trên các phần tử khối và danh sách

Đặt thùng chứa của bạn widthvào pxvà thêm:

margin: 0 auto;

Tham khảo .

Sử dụng 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 -->

Tôi nghĩ rằng cách tốt nhất là sử dụng marginthay vì display.

I E:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

Kiểm tra kết quả và mã:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 không biết inline-block. Bạn phải thêm:

display:inline;
zoom: 1;

Thêm cái này cho bạn kiểu dáng

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

* Nếu chiều rộng vùng chứa của bạn là 50px, hãy đặt 25px, nếu đó là 10em, hãy đặt 5em.

Bạn cũng có thể làm điều này bằng cách thay đổi .paginationbằng cách thay thế "text-align: centre" bằng hai đến ba dòng css cho bên trái, biến đổi và tùy thuộc vào hoàn cảnh, vị trí.

.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>

bước 1

tạo hai hoặc nhiều div bạn muốn và cung cấp cho chúng một chiều rộng xác định như 100px cho mỗi cái sau đó thả nó sang trái hoặc phải

bước 2

sau đó warp hai div này trong div khác và cho nó chiều rộng 200px. để div này áp dụng lề tự động. boom nó hoạt động khá tốt. kiểm tra ví dụ trên.

Chỉ cần thêm

left:15%; 

vào menu css của tôi

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

đã lừa trung tâm quá