如何水平对齐我的 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 的行 div，我做错了什么？

472356 次浏览
小开
最佳答案

为了实现你正在努力做的事情:

考虑使用 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 ability to provide width/height
}​

演示

  • 使用 margin: 0 auto;和 width: 100%是没有用的，因为元素将占用整个空间。

  • float: left将使元素向左浮动，直到没有空格为止，因此它们将移动到一个新行上。使用 display: inline-block可以内联显示元素，但是可以提供大小(与忽略宽度/高度的 display: inline相反)

小开

如果要在一行中显示元素，而 IE 6/7并不重要，可以考虑使用 display: table和 display: table-cell而不是 float。

inline-block导致元素之间的水平 差距，并且需要对间隙进行归零。最简单的方法是为父元素设置 font-size: 0，然后为具有 display: inline-block的子元素恢复 font-size，方法是将它们的 font-size设置为 px或 rem值。

小开

另一个 工作范例，使用 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/

小开

虽然没有涵盖这个问题(因为你想在容器内对齐 <div>) ，但是它们是直接相关的: 如果你只想对齐一个 div，你可以这样做:

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

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

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

目前还不错。

小开

当我需要处理水平 div 对齐时，我使用了这两种方法。 < br/> first (使用边距属性居中对齐) :

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

将左边距和右边距设置为 auto 指定它们应平均分割可用边距。如果宽度为100% ，则中心对齐无效。

第二:

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

如果您有多个元素，并且希望所有元素都集中在一个表单元格中(即一个单元格中的多个按钮) ，那么使用第二种方法是很方便的。

小开

CSS 中的对齐是一场噩梦。幸运的是，W3C 在2009年引入了一个新标准: 软箱。有一个很好的教程关于它 给你。就我个人而言，我发现它比其他方法更符合逻辑，也更容易理解。

.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>

小开

使用 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 网格，而不是使用 Float。然而，仍有1% 的浏览器不支持 Flex。但谁会真正关心老 IE 用户呢;)

小提琴: 看这里

小开

用 Flex 代替 float

.row {
display: flex;
flex-direction: row;
}

提交答案