我怎样才能水平对齐我的div？

Question

出于某种原因,我的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.我究竟做错了什么？

Answer 1

要实现您想要做的事情:

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

Answer 2

试试这个:

.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
}?

DEMO

• 其margin: 0 auto;沿width: 100%是无用的,因为你元素将采取充分的空间.

• float: left将浮动左边的元素,直到没有剩余空间,因此它们将继续新的一行.用于display: inline-block能够内联显示元素,但能够提供尺寸(与display: inline忽略宽度/高度的位置相比)

Answer 3

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

Answer 4

虽然没有覆盖这个问题(因为你想对齐<div>容器内部的s)而是直接相关:如果你想只横向对齐一个div,你可以这样做:

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

Answer 5

使用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用户;)

小提琴:检查一下

Answer 6

CSS中的对齐是一场噩梦.幸运的是,W3C于2009年推出了一项新标准:Flexible Box.有关于它的一个很好的教程在这里.我个人认为它比其他方法更合乎逻辑,更容易理解.

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

Answer 7

如果元素要显示在一行中并且 IE 6/7 不重要，请考虑使用display: tableanddisplay: table-cell代替float。

inline-block导致元素之间存在水平间隙，需要将间隙归零。最简单的方法是font-size: 0为父元素设置，然后通过将其设置为 a或值来恢复font-size具有的子元素。display: inline-blockfont-sizepxrem