如何居中浮動元素？

我正在實現分頁，它須要居中。 問題在於連接須要顯示爲塊，所以它們須要浮動。 可是而後， text-align: center; 對他們不起做用。 我能夠經過給左邊的wrapper 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 -->

爲了獲得這個主意，我想要什麼：

---

#1樓

使浮子居中很容易 。 只需使用容器樣式：

.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-5px）。 爲了消除這些差距，我將添加到arnaud576875代碼（未經充分測試）：

  .pagination {字距：-1em； }

  .pagination a {單詞間距：.1em; }

• 在IE6 / 7的block和list-items元素上將不起做用

---

#2樓

設置容器的width以px並添加：

margin: 0 auto;

參考 。

---

#3樓

IE7不知道inline-block 。 您必須添加：

display:inline;
zoom: 1;

---

#4樓

多年以來，我一直使用在某個博客中學到的老技巧，對不起，我不記得要給他積分的名字了。

不管如何將浮動元素居中，這都應該起做用：

您須要這樣的結構：

.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 +上運行。

---

#5樓

只需添加

left:15%;

進入個人CSS菜單

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

也作了對中技巧