Question

我想将一组并排排列的图像居中。尽管使用了margin: auto，但图像仍然排列在左侧。我在另一个线程中读到添加display: block，但这也没有用。想法？

<div style="margin: auto; display:block;">
  <p>
    <img src="/wp-content/uploads/2015/05/tca_horizontal_blue.gif"
         style="float: left;" alt="" width="200px" height="93px" />
    <img src="/wp-content/uploads/2015/05/nea-logo-e1431885075484.png"
         style="float: left;" alt="" width="218px" height="93px" />
    <img src="/wp-content/uploads/2015/05/Arts-Committee-color1-e1431885177830.png"
         style="float: left;" alt="" width="155px" height="93px" />
  </p>
</div>

Answer 1

根据§10.3.3，A以块级元素为中心，因为

如果'margin-left'和'margin-right'都是'auto'，则使用它们的值是平等的。这使元素相对于中心水平居中包含块的边缘。

但是，如果margin: 0 auto为width，则无效，因为该块将填充其包含的块：

如果'width'设置为'auto'，则任何其他'auto'值变为'0'和 'width'来自最终的平等。

相反，您可以使用表格显示。根据{{3}}，

如果表格的边距设置为“0”，宽度设置为“自动”，则表示表格不会自动调整大小以填充其包含的块。但是，一旦找到表的'width'的计算值（使用下面给出的算法，或者在适当的情况下，使用其他一些UA 依赖算法）然后§17.5.2的其他部分适用。因此，表可以使用左右“自动”边距进行居中，例如。

auto

div {
  display: table;
  margin: 0 auto;
}

div {
  display: table;
  margin: 0 auto;
  border: 2px solid blue;
}
span {
  display: inline-block;
  height: 20px;
  width: 20px;
  border: 2px solid red;
  margin: 10px;
}

但是，这可能没有必要。你说你想要使图像居中。因此，您可以使用section 10.3：

，而不是尝试使块容器居中，而是将其内容居中

此属性描述块容器的内联级内容是对齐的。

<div>
  <span>1</span>
  <span>2</span>
</div>

div {
  text-align: center;
}

div {
  text-align: center;
  border: 2px solid blue;
}
span {
  display: inline-block;
  height: 20px;
  width: 20px;
  border: 2px solid red;
  margin: 10px;
}

Answer 2

您还需要设置div的宽度。

CISampler* src = [CISampler samplerWithImage:inputImage options:
                  [NSDictionary dictionaryWithObjectsAndKeys:kCISamplerFilterNearest, kCISamplerFilterMode, nil]];

以下是演示：http://jsfiddle.net/qqyjgnhw/1/

强烈推荐阅读CSS的盒子模型。在你花一点时间知道幕后发生了什么之后，它会更有意义。

Answer 3

如果您移除了float:left元素上的img，并添加了display:block，那么它们将会集中在一起...... 当一个元素浮动时，它完全没有流动。

边距：自动不居中图像

3 个答案: