Question

我正在使用Ink作为电子邮件模板进行简报设计。

如果我想将图像居中，我必须使用float：center和margin：0 auto。它适用于iPhone Mail应用程序，iPhone Gmail应用程序和Android Gmail应用程序，但它不适用于本机Windows Phone电子邮件。

有人知道让它起作用的技巧吗？

亚历

Answer 1

为了使用margin: 0 auto，您需要将元素显示为块级元素。

这意味着您应该使用display: block;。

另一个选项是使用text-align: center;作为父元素，在页面上水平对齐内联子项的中心。

更新

以下是 a JSFiddle Demo ，演示如何执行上述逻辑。

CSS：

img {
  width: auto;
  max-width: 100%;

  margin-top: 10px; /* Just for Demo */
}

.img1 {
  display: block;
  margin: 0 auto;
}

.parent {
  text-align: center;
}

HTML：

<img class="img1" src="http://placehold.it/100/50">

<div class="parent">
    <img class="img2" src="http://placehold.it/100/50">
</div>

float：center在Windows Phone的新闻稿中显示不佳

1 个答案:

更新