出于某种原因,我的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>
&#13;
有时会有一个行div只有一个块div。我做错了什么?
答案 0 :(得分:151)
要实现您的目标:
考虑使用display: inline-block
代替float
。
答案 1 :(得分:53)
试试这个:
.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
将浮动左侧的元素,直到没有剩余空间,因此它们将换行。使用display: inline-block
能够以内联方式显示元素,但能够提供尺寸(与忽略宽度/高度的display: inline
相比)
答案 2 :(得分:8)
另一个working example,使用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;
}
答案 3 :(得分:7)
虽然没有涵盖这个问题(因为你想对齐容器内的<div>
)而是直接相关:如果你想只横向对齐一个div,你可以这样做:
#MyDIV
{
display: table;
margin: 0 auto;
}
答案 4 :(得分:7)
使用FlexBox:
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
.row {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center; /* for centering 3 blocks in the center */
/* justify-content: space-between; for space in between */
}
.block {
width: 100px;
}
最新趋势是使用Flex或CSS Grid而不是使用Float。但是,仍然有1%的浏览器不支持Flex。但无论如何谁真正关心旧的IE用户;)
小提琴:Check Here
答案 5 :(得分:5)
CSS中的对齐是一场噩梦。幸运的是,W3C在2009年引入了一个新标准:Flexible Box。有一个很好的教程here。我个人觉得它比其他方法更合乎逻辑,也更容易理解。
.row {
width: 100%;
display: flex;
flex-direction: row;
}
.block {
width: 100px;
}
&#13;
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
&#13;
答案 6 :(得分:4)
如果元素要显示在一行中且IE 6/7无关紧要,请考虑使用display: table
和display: table-cell
代替float
。
inline-block
导致元素之间存在水平间隙,并且需要将间隙归零。最简单的方法是为父元素设置font-size: 0
,然后通过将font-size
设置为display: inline-block
或{,为font-size
的子元素恢复px
{1}}值。
答案 7 :(得分:2)
我尝试了接受的答案,但最终发现:
margin: 0 auto;
width: anything less than 100%;
到目前为止效果很好。
答案 8 :(得分:1)
当我需要处理水平div对齐时,我使用了这两种方法。
first(Center Aligning Using the margin Property):
.center-horizontal-align {
margin-left: auto;
margin-right: auto;
width: (less than 100%) or in px
}
将左右边距设置为自动指定它们应平均分割可用边距。如果宽度为100%,则居中对齐无效。
第二个:
.center-horizontal-align {
display: table
margin-left: auto;
margin-right: auto;
}
当你有几个元素并且你希望所有元素都集中在一个表格单元格中时(即一个单元格中的几个按钮),使用第二种方法很方便。