根据页面是左还是右对齐文本答案

【问题标题】：Align text based on if page is left or right根据页面是左还是右对齐文本
【发布时间】：2015-06-08 12:51:13
【问题描述】：

我想做如下的事情：

@page :left{
    h1 {text-align: left;}
}
@page :right {
    h1 {text-align: right;}
}

但是这种语法在 CSS 中不起作用。如何根据页面是左还是右更改文本对齐方式？

【问题讨论】：

您想只更改 h1 的对齐方式，还是更改该页面上所有段落样式的对齐方式？
兼容性似乎有限，这可能是主要问题.. developer.mozilla.org/en-US/docs/Web/CSS/:left 但是你试过margin-left: 和margin-right: 吗？文本对齐只会对齐 h1 标签内的文本，如果没有设置宽度，您不会注意到任何一侧的对齐，因为 h1 块只会与其中的文本一样宽。
@Hobbes 我在这个页面上只有一个文本元素，所以我想任何一种方式都可以。 @HastigZusammenstellen 这个名字对@message 来说太长了。无论如何，只要我可以根据页面是左还是右指定一些格式，任何解决方案都可以。

【解决方案1】：

根据https://www.w3.org/TR/css3-page/#margin-property-list，语法：

@page :left {
    h1 { text-align: left; }
}
@page :right {
    h1 { text-align: right; }
}

是正确的；但是，正如其他人所说，目前浏览器不支持@page，最新发布的PrinceXML也不支持text-align。

这意味着，到目前为止，它还不能完成。

但是，PrinceXML 在页边距上下文中支持margin。因此，如果一个人可以负担得起使用静态边距推送文本，例如：

@page :left{
    h1 { margin-right: 10000em; } // We all know 10000em equals to infinity.
}
@page :right {
    h1 { margin-left: 10000em; }
}

那么这是一个不错的组合。

编辑：事实上，PrinceXML 确实支持text-align，但不支持运行标头；显然它只适用于生成的字符串内容。

【讨论】：

【解决方案2】：

如果为页面上的所有文本设置对齐方式是可以接受的，这应该可以：

@page :left {text-align: left;}
@page :right {text-align: right;}

如果页面包含一个 h1 元素，再加上一个或多个其他元素，您可以将 h1 放在页眉中，参见this related question。

【讨论】：

谢谢，但我需要能够为单个元素设置样式。
谢谢。我认为目前没有 CSS 答案来解决基于当前页面左侧或右侧设置样式的更一般问题，但您指出的解决方案将适用于 Flying Saucer 或 WeasyPrint（但不适用于任何浏览器）。

【解决方案3】：

我没有测试过，我相信你可以做到这一点：

@page :left h1 {text-align: left;}
@page :right h1 {text-align: right;}

【讨论】：