如何居中浮动元素?


354

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

为了得到这个主意,我想要什么:

替代文字


float属性的全部目的是将元素沿其容器的左侧或右侧放置。
罗布

3
@Rob:好吧,我需要为链接元素定义宽度和高度,这只能在块元素上完成,但是当您使链接块成为块时,它们分别在新行上展开,这就是为什么我将它们浮动。
麦克

替代解决方案,当您不想/不能使用内联块时。stackoverflow.com/questions/1232096/…–
hakunin

1
我相信这个问题应引起主持人的注意,因为其当前的标题和答案具有误导性。问题不是关于在中心浮动内容,而是关于使内容居中。浮动意味着非浮动的兄弟内容应该填补剩余的空白,这显然既不是期望的,也是没有实现的。

8
@AndreiGheorghiu如果您这样认为,建议您进行修改,而不是将其标记为mod。任何人都可以编辑这些问题,因此请编辑问题并在编辑原因中写详细说明。这是任何用户都可以做的事情,不必成为主持人。这个问题或需要主持人干预的任何答案都没有问题
Zoe

Answers:


406

删除floats并使用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]使元素生成一个内联级别的块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级别框。


10
提示:不要忘记垂直对齐。
Synexis 2012年

5
是的,这是我发现的垂直对齐实际上能达到您期望的少数情况之一。
Mike Turley

4
这种方法的缺点是很难控制水平间距,因为元素之间可能会出现空格。
Xavier Poinas 2014年

@XavierPoinas:使用字体大小:0; 父母来解决这个问题
roelleor '16

请记住,尽管“ font-size:0”曾经在Android设备上不起作用。不知道对于最新版本是否仍然如此。
Andreas Baumgart

150

多年以来,我一直使用在某个博客中学到的老技巧,对不起,我不记得要给他积分的名字。

无论如何将浮动元素居中,这都应该起作用:

您需要这样的结构:

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


1
提醒您,如果只有1个float元素,则此方法有效。
Wtower

问题是水平滚动条会出现,因为外部div超出了屏幕。同样,当列表换行到另一行时,整个内容将向左对齐。
cleversprocket 2014年

如果不设置容器的最大宽度,这不会有所作为,margin: 0 auto;在这种情况下
会做得更好

1
对我来说,float: left;没有必要上.main-container.fixer-container
csum

@cleversprocket我通过将所有内容包装在一个div中来解决水平滚动问题overflow: hidden;
csum 16'9-9

36

使浮子居中很容易。只需使用容器样式:

.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元素上将不起作用


display:表格技巧简直令人难以置信,只需几行就可以完成所有操作。我要记住这一点。欢呼声
2014年

内联块技术效果非常好。幸运的是,我正在使用的元素(嵌套的div元素)可以很好地解决这一差距。
karolus

您也可以通过将字体大小减小为零,然后在子元素内恢复为先前的值来消除行内块间距
Mike Causer

15

将您的容器width放入其中px并添加:

margin: 0 auto;

参考


1
对我来说,这是最好的答案:P。
alansiqueira27 2014年

3
这仅在容器宽度合适的情况下才有效,这在包含浮动元素时会出现问题。
Wtower

11

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


5

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


1
仅需保证金即可:auto; 而不是单个的left和right属性。
cellepo



1

将此添加到您的样式中

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

*如果您的容器宽度为50px,则放置25px,如果为10em,则放置5em。


1

您也可以通过以下方式进行更改.pagination:将“ text-align:center”替换为两到三行css,以用于left,transform和根据情况的位置。

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


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


-1

只是添加

left:15%; 

进入我的CSS菜单

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

也做了对中技巧


4
15%是随意的。
Wtower
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.