我怎样才能水平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: left将float: left的元素浮起来，直到没有剩余空间为止，这样他们就会换行了。 使用display: inline-block可以显示内联元素，但是可以提供大小（与display: inline相比，width / height被忽略）
另一个工作示例 ，使用display: inline-block和text-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）。
