Question

出于某种原因，我的div在一个包含div中水平居中：

＆＃13;

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

＆＃13;

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

＆＃13;

有时会有一个行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 abality to provide width/height
}

<强> DEMO

将margin: 0 auto;与width: 100%一起使用是没用的，因为您的元素将占用整个空间。
float: left将浮动左侧的元素，直到没有剩余空间，因此它们将换行。使用display: inline-block能够以内联方式显示元素，但能够提供尺寸（与忽略宽度/高度的display: inline相比）

Answer 3

另一个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;
}

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

Answer 4

虽然没有涵盖这个问题（因为你想对齐容器内的<div>）而是直接相关：如果你想只横向对齐一个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用户;）

小提琴：Check Here

Answer 6

CSS中的对齐是一场噩梦。幸运的是，W3C在2009年引入了一个新标准：Flexible Box。有一个很好的教程here。我个人觉得它比其他方法更合乎逻辑，也更容易理解。

＆＃13;

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

Answer 7

如果元素要显示在一行中且IE 6/7无关紧要，请考虑使用display: table和display: table-cell代替float。

inline-block导致元素之间存在水平间隙，并且需要将间隙归零。最简单的方法是为父元素设置font-size: 0，然后通过将font-size设置为display: inline-block或{，为font-size的子元素恢复px {1}}值。

Answer 8

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

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

到目前为止效果很好。

Answer 9

当我需要处理水平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;
}

当你有几个元素并且你希望所有元素都集中在一个表格单元格中时（即一个单元格中的几个按钮），使用第二种方法很方便。

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

9 个答案: