css - float :center doesn't display well on newsletter for Windows Phone

Question

我正在使用 Ink 作为电子邮件模板进行时事通讯设计。

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

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

亚历克斯

Answer 1

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

这意味着您应该使用 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>