logo标签列表

如何水平对齐我的 div 元素？

css
155
由于某种原因，我的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。我做错了什么？

非常好的链接：https://www.w3schools.com/css/css_inline-block.asp - Darwin Ameli
10个回答
218
74

试试这个：

.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相反，在其中宽度/高度被忽略）

3
演示现在已经消失了。 - Sean N.
52

在CSS中，对齐一直是一件令人头疼的事情。幸运的是，W3C于2009年推出了一个新标准：Flexbox布局。这里有一个很好的教程。个人认为，与其他方法相比，它更加合乎逻辑且易于理解。

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

2
这个完美运行！ - Bryan
15

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

Fiddle：点此查看

10

另一个工作示例，使用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;
}

Fiddle: http://jsfiddle.net/fNvgS/

8
尽管此问题未涉及（因为您希望将容器内的 <div> 对齐），但以下内容与之直接相关：如果您想要水平对齐一个 <div>，可以执行以下操作：
#MyDIV
{
    display: table;
    margin: 0 auto;
}
5
如果要在一行中显示元素，且不考虑IE 6/7，则考虑使用display: table和display: table-cell而不是float。 inline-block会导致元素之间出现水平间隙，并需要将这些间隙归零。最简单的方法是为父元素设置font-size: 0，然后通过将具有display: inline-block的子元素的font-size设置为px或rem值来恢复其font-size。
3
我尝试了被认可的答案，但最终发现：
margin: 0 auto;
width: anything less than 100%;

到目前为止表现良好。
3

在处理水平div对齐时，我通常使用以下两种方法。
第一种方法 (使用margin属性居中对齐):

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

当您有多个元素并且想要将它们全部居中在一个表格单元格中时（即一个单元格中有多个按钮），使用第二种方法会更方便。

1

使用flex代替float

.row {
    display: flex;
    flex-direction: row;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接