第1步

Question

我正在实施分页，它需要居中。问题是链接需要显示为块，因此需要浮动它们。但是，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 -->

为了得到这个想法，我想要的是：

alt text

Answer 1

删除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：

内联块以内联方式放置（即与相邻内容位于同一行），但它的行为与块相同。

这通常可以有效地取代花车：

当您想要为内联元素指定宽度时，实际使用此值。在某些情况下，某些浏览器不允许实际内联元素的宽度，但如果切换到display：inline-block，则允许设置宽度。“（http://www.quirksmode.org/css/display.html#inlineblock）。

来自W3C spec：

[inline-block]导致元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

Answer 2

多年以来，我使用了一些我在博客中学到的老技巧，对不起，我不记得这个名字给了他信用。

无论如何中心浮动元素都应该有效：

你需要这样的结构：

    .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 +中运行。

Answer 3

居中浮动很容易。只需使用容器样式：

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

更改浮动元素的边距：

.pagination a{ margin: 0 2px; }

或

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

并保持原样。

这是我展示菜单或分页等内容的最佳解决方案。

优势：

任何元素（块，列表项等）的跨浏览器
简单

弱点：

仅当所有浮动元素都在一行中时才有效（对于菜单通常是好的，但对于画廊通常没有）。

@ arnaud576875在这种情况下，使用内联块元素会很好（跨浏览器），因为分页只包含锚点（内联），没有列表项或div：

优势：

适用于多行项目。

Weknesses：

内联块元素之间的间隙 - 它的工作方式与单词之间的空格相同。这可能会导致计算容器宽度和样式边距的麻烦。间隙宽度不是恒定的，而是浏览器特定的（4-5px）。为了摆脱这个差距，我将添加到arnaud576875代码（未经过全面测试）：

.pagination {word-spacing：-1em; }

.pagination a {word-spacing：.1em; }
它在块和列表项元素的IE6 / 7中不起作用

Answer 4

在width中设置容器的px并添加：

margin: 0 auto;

Reference

Answer 5

使用Flex

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

我认为最好的方法是使用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

Answer 7

IE7 不知道inline-block。你必须添加：

display:inline;
zoom: 1;

Answer 8

text-align: center;
float: none;

Answer 9

将此添加到造型

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

*如果您的容器宽度为50px，则为25px，如果是10em则为5em。

Answer 10

您也可以通过更改.pagination来实现此目的，方法是将“ text-align：center”替换为两到三行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 -->

Answer 11

<!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应用保证金自动。繁荣它运作良好。检查上面的例子。

Answer 12

只需添加

left:15%;

进入我的css菜单

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

也做了中心伎俩

如何将浮动元素居中？

12 个答案:

第1步

第2步