如何使用 CSS 使文本在移动设备上居中答案

【问题标题】：How to center text on mobile with CSS如何使用 CSS 使文本在移动设备上居中
【发布时间】：2019-10-24 15:18:05
【问题描述】：

我正在尝试让媒体查询处理 HTML 电子邮件。我已经通过 Gmail 使用 IOS 手机进行了很多测试，但仍然没有找到任何可行的解决方案。

我一直在使用 MJML 来尝试让它工作。显示它应该可以正常工作，但我发送了电子邮件并且媒体查询不起作用。

我正在 iPhone 5s 上测试它 Gmail 版本 6.0.190822

我想要实现的主要目标是拥有文字

在桌面上：

Left text                           Right Text

关于移动中心文本：

                Left text
               Right text

【问题讨论】：

【解决方案1】：

Gmail 会在某些版本（IMAP/POP - 请参阅 mammoth explanation by Rémi Parmentier）以及包含无效代码或属性选择器（即您的 p[id="mobile"]）的情况下去除 CSS。

所以，首先将 p[id="mobile"] 更改为 p#mobile，实际上，根据 HTML 判断，应该是 p#mobile-center。

因此，您可以通过这种方式满足大多数人的需求，但某些 Gmail 版本除外。那么，为了满足所有人的需求，您真的希望默认的核心响应行为，而不依赖于嵌入式 CSS。对于那些支持它的嵌入式 CSS，您仍然可以对它进行一些增强。

要在不使用 @media 查询或嵌入 CSS 的情况下实现响应式行为，请参阅 hybrid email method。

【讨论】：