css - 根据页面是左还是右对齐文本

Question

我想做如下的事情：

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

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

Answer 1

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

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

如果页面包含一个 h1 元素，加上一个或多个其他元素，您可以将 h1 放在页眉中，请参阅此相关问题。

Answer 2

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

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

Answer 3

根据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; }
}

那么这是一个OK kludge。

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