CSS 如何水平对齐我的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9277311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I horizontally align my divs?
提问by John
For some reason my divs won't center horizontally in a containing 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>And sometimes there is a row div with just one block div in it. What am I doing wrong?
有时会有一行 div，其中只有一个块 div。我究竟做错了什么？
回答by Martin Hennings
To achieve what you are trying to do:
要实现您想要做的事情：
Consider using display: inline-blockinstead of float.
考虑使用display: inline-block代替float。
回答by Didier Ghys
Try this:
尝试这个：
.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
}?
having
margin: 0 auto;along withwidth: 100%is useless because you element will take the full space.float: leftwill float the elements to the left, until there is no space left, thus they will go on a new line. Usedisplay: inline-blockto be able to display elements inline, but with the ability to provide size (as opposed todisplay: inlinewhere width/height are ignored)
有
margin: 0 auto;withwidth: 100%是没用的，因为你的元素将占据整个空间。float: left将元素向左浮动，直到没有剩余空间，因此它们将在新行上。用于display: inline-block能够内联显示元素，但能够提供大小（与display: inline忽略宽度/高度的位置相反）
回答by Caner
Alignments in CSS had been a nightmare. Luckily, a new standard is introduced by W3C in 2009: Flexible Box. There is a good tutorial about it here. Personally I find it much more logical and easier to understand than other methods.
CSS 中的对齐一直是一场噩梦。幸运的是，W3C 在 2009 年引入了一个新标准：Flexible Box。有关于它的一个很好的教程在这里。我个人认为它比其他方法更合乎逻辑且更容易理解。
.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>回答by user2790239
Using 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;
}
The latest trend is to use Flex or CSS Grid instead of using Float. However, still some 1% browsers don't support Flex. But who really cares about old IE users anyway ;)
最新的趋势是使用 Flex 或 CSS Grid 而不是使用 Float。然而，仍有 1% 的浏览器不支持 Flex。但是谁真正关心老 IE 用户呢 ;)
Fiddle: Check Here
小提琴：检查这里
回答by Benjamin Crouzier
Another working example, using display: inline-blockand text-align: center
另一个工作示例，使用display: inline-block和text-align: center
HTML:
HTML:
<div class='container'>
<div class='row'>
<div class='btn'>Hello</div>
<div class='btn'>World</div>
</div>
<div class='clear'></div>
</div>
CSS:
CSS:
.container {
...
}
.row {
text-align: center;
}
.btn {
display: inline-block;
margin-right: 6px;
background-color: #EEE;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/fNvgS/
回答by Leniel Maccaferri
Although not covering this question (because you want to align the <div>s inside the container) but directly related: if you wanted to align just one div horizontally you could do this:
虽然没有涵盖这个问题（因为你想<div>在容器内对齐s）但直接相关：如果你只想水平对齐一个 div，你可以这样做：
#MyDIV
{
display: table;
margin: 0 auto;
}
回答by Marat Tanalin
If elements are to be displayed in one line and IE 6/7 do not matter, consider using display: tableand display: table-cellinstead of float.
如果元素要显示在一行中并且 IE 6/7 无关紧要，请考虑使用display: tableanddisplay: table-cell代替float。
inline-blockleads to horizontal gapsbetween elements and requires zeroing that gaps. The most simple way is to set font-size: 0for parent element and then restore font-sizefor child elements that have display: inline-blockby setting their font-sizeto a pxor remvalue.
inline-block导致元素之间的水平间隙，并需要将该间隙归零。最简单的方法是font-size: 0为父元素设置，然后通过将它们设置为 a或值来恢复font-size具有的子元素。display: inline-blockfont-sizepxrem
回答by irjc
I tried the accepted answer, but eventually found that:
我尝试了接受的答案，但最终发现：
margin: 0 auto;
width: anything less than 100%;
Works well so far.
到目前为止运作良好。
回答by magiccrafter
I've use this two approaches when I need to handle horizontal div alignment.
first (Center Aligning Using the margin Property):
当我需要处理水平 div 对齐时，我使用了这两种方法。
首先（使用边距属性居中对齐）：
.center-horizontal-align {
margin-left: auto;
margin-right: auto;
width: (less than 100%) or in px
}
Setting the left and right margins to auto specifies that they should split the available margin equally. Center-aligning has no effect if the width is 100%.
and the second:
将左右边距设置为 auto 指定它们应该平均分割可用边距。如果宽度为 100%，则居中对齐无效。
第二个：
.center-horizontal-align {
display: table
margin-left: auto;
margin-right: auto;
}
Using the second approach is convenient when you have several elements and you want all of them to be centred in one table cell(i.e. several buttons in one cell).
当您有多个元素并且希望所有元素都集中在一个表格单元格中（即一个单元格中有多个按钮）时，使用第二种方法很方便。
