如何水平对齐div ?

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?

有时会有一个只有一个block div的row div。我做错了什么?

9 个解决方案

#1

121

To achieve what you are trying to do:

为了实现你的目标:

Consider using display: inline-block instead of float.

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

#2

Try this:

试试这个:

.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

演示

having margin: 0 auto; along with width: 100% is useless because you element will take the full space.

保证金:0汽车;随着宽度:100%是无用的，因为你的元素将占据整个空间。
float: left will float the elements on the left, until there is no space left, thus they will go on a new line. Use display: inline-block to be able to display elements inline, but with the ability to provide size (compared to display: inline where width/height are ignored)

float:左侧将元素浮动在左侧，直到没有剩余空间，因此它们将在新的行上。使用display: inline-block可以以内联方式显示元素，但是可以提供大小(与display: inline，其中忽略了宽度/高度)

#3

Another working example, using display: inline-block and 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/

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

#4

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:

虽然没有涉及到这个问题(因为您想要在容器中对齐

s)，但是直接相关:如果您想要水平对齐一个div，您可以这样做:

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

#5

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年引入了一项新标准:柔性框。这里有一个关于它的很好的教程。我个人认为它比其他方法更有逻辑性，更容易理解。

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

#6

If elements are to be displayed in one line and IE 6/7 do not matter, consider using display: table and display: table-cell instead of float.

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

inline-block leads to horizontal gaps between elements and requires zeroing that gaps. The most simple way is to set font-size: 0 for parent element and then restore font-size for child elements that have display: inline-block by setting their font-size to a px or rem value.

内联块导致元素之间的水平间隙，需要对间隙进行调零。最简单的方法是设置字体大小:0作为父元素，然后恢复具有显示的子元素的字体大小:通过将其字体大小设置为px或rem值来设置inline-block。

#7

I tried the accepted answer, but eventually found that:

我尝试了公认的答案，但最终发现:

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

Works well so far.

到目前为止工作良好。

#8

Using FlexBox:

使用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网格而不是浮动。然而，仍有1%的浏览器不支持Flex。但谁会在乎老IE用户呢?)

Fiddle: Check Here

小提琴:检查在这里

#9

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).

如果您有几个元素，并且希望所有元素都集中在一个表单元格中(例如:在一个单元格中有几个按钮)。

#1

121