我怎样才能水平alignment我的div?

出于某种原因,我的div不会水平居中在一个包含div:

.row { width: 100%; margin: 0 auto; } .block { width: 100px; float: left; } 
 <div class="row"> <div class="block">Lorem</div> <div class="block">Ipsum</div> <div class="block">Dolor</div> </div> 

有时候,只有一格的div就是一个行格。 我究竟做错了什么?

要实现你正在尝试做的事情:

考虑使用display: inline-block而不是float

尝试这个:

 .row { width: 100%; text-align: center; // center the content of the container } .block { width: 100px; display: inline-block; // display inline with abality to provide width/height }​ 

DEMO

  • margin: 0 auto; 随着width: 100%是无用的,因为你的元素将占用全部空间。

  • float: leftfloat: left的元素浮起来,直到没有剩余空间为止,这样他们就会换行了。 使用display: inline-block可以显示内联元素,但是可以提供大小(与display: inline相比,width / height被忽略)

另一个工作示例 ,使用display: inline-blocktext-align: center

HTML

 <div class='container'> <div class='row'> <div class='btn'>Hello</div> <div class='btn'>World</div> </div> <div class='clear'></div> </div> 

CSS

 .container { ... } .row { text-align: center; } .btn { display: inline-block; margin-right: 6px; background-color: #EEE; } .clear { clear: both; } 

小提琴: http : //jsfiddle.net/fNvgS/

虽然没有涉及这个问题(因为你想alignment容器内的<div> s),但是直接相关:如果你想只alignment一个div,你可以这样做:

 #MyDIV { display: table; margin: 0 auto; } 

如果要在一行中显示元素(和IE6 / 7无关),请考虑使用display: table/table-cell而不是float

使用inline-block会导致元素之间的水平间距,因此需要采取另一个步骤来消除这些间隙(更简单的方法是为父元素设置font-size: 0 ,然后为具有display: inline-block子元素设置font-size: 0 display: inline-block )。

我尝试了接受的答案,但最终发现:

 margin: 0 auto; width: anything less than 100%; 

迄今为止工作良好。

当我需要处理水平divalignment时,我使用了这两种方法。
第一个( 使用边距属性进行居中alignment ):

 .center-horizontal-align { margin-left: auto; margin-right: auto; width: (less than 100%) or in px } 

将左右边距设置为自动指定它们应平均分割可用边距。 如果宽度为100%,则居中alignment无效。

第二个:

 .center-horizontal-align { display: table margin-left: auto; margin-right: auto; } 

当你有几个元素时,使用第二种方法是很方便的,而且你希望所有元素都集中在一个表格单元中(即一个单元格中的几个button)。