狮身人面像的居中标题答案

【问题标题】：Centered Heading With Sphinx狮身人面像的居中标题
【发布时间】：2018-09-22 04:10:17
【问题描述】：

我正在用 sphinx 编写一个文档，其中包含三种主要类型的元素：标题、图像和纯文本。有时，有些元素需要居中：

Heading
=======

.. rst-class:: center

A centered paragraph, followed by non-centered image.

.. image:: /_static/exhibit_a.png

A non-centered paragraph, followed by centered image.

.. image:: /_static/exhibit_b.png
   :class: center

常规文本和图像居中很好，因为我注册了一个如下所示的 CSS 文件：

.center { text-align: center; }
img.center {
    display: block;
    margin: auto;
}

但是，以下内容无法按预期工作：

.. rst-class: center

===================
A Heading 1 Element
===================

Some generic text

reST class (sphinx rst-class) 指令应该只应用于紧随其后的元素，但在这种情况下，整个部分将居中对齐，其中包含所有内容。在此示例中，Some generic text 居中，但应左对齐。实际上，像这样将文档中的第一个标题居中几乎可以使整个文档居中。

如何将标题居中对齐，使其仅适用于 <h1> 标记而不是整个部分？

我在 sphinx 1.8.0 上使用 Read the Docs 主题，以防万一。

其他想法

就我而言，我需要修改所有 <h1> 和 <h2> 实例，并且不需要修改其他标题。我知道这在 CSS 中是微不足道的

h1 h2 { text-align: center; }

但是，这个特定的文档是一个更大的项目的一部分，我希望在这个项目中保持所有原始样式不变。做到这一点的唯一方法是只为这个文档包含我的 CSS 自定义。这是一个可能的替代方案吗？

更多想法

发生错误是因为center 类被附加到围绕整个部分的<div>，而不是<h1> 标记。但是，我希望能够允许某些 div（如延长线）具有 center 类。只是不是带有 section 类的 div。

【问题讨论】：

标签： python python-sphinx restructuredtext

【解决方案1】：

与.. rst-class: center 的reST 标记一起，尝试组合CSS 选择器，如下所示：

.center h1,
.center h2 {
    text-align: center;
}

因此只有文档中的h1 和h2 会居中。

【讨论】：

但我希望一些 div / p 元素居中，而不是整个部分。
我在问题中添加了另一个附录。
我发布了一个很大程度上基于你的答案。

【解决方案2】：

我们的想法是取消选择包含我想要的部分的<div> 元素，并在 CSS 中选择它下面的标题：

.center:not(.section), .center>h1, .center>h2 {
    text-align: center;
}

这将取消选择具有section 类的外层 div，但将其下方的标题居中。 :not 似乎是 IE8 不支持的 CSS3 功能，但这一点也不困扰我：https://stackoverflow.com/a/2482475/2988730

使用.center>h1 而不是.center h1 可确保我只获得我标记的确切标题，而不是所有嵌套的标题。虽然后者非常方便，但如果我使用它，肯定会遇到问题。

【讨论】：