Question

我正在用狮身人面像编写文档，其中包含三种主要元素：标题，图像和纯文本。有时，某些元素需要居中：

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（狮身人面像rst-class）伪指令仅应应用于紧随其后的元素，但是在这种情况下，整个节将居中对齐，并且其中的所有内容都将对齐。在此示例中，Some generic text居中，但应左对齐。实际上，像这样将文档中的第一个标题居中居中。

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

如果重要的话，我正在使用sphinx 1.8.0上的“阅读文档”主题。

其他想法

就我而言，我需要修改所有<h1>和<h2>实例，而无需修改其他标题。我知道用CSS

h1 h2 { text-align: center; }

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

更多想法

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

Answer 1

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

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

因此，文档中只有h1和h2将居中。

Answer 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可确保我仅获得标记的确切标题，而不是所有嵌套的标题。虽然后者很方便，但是如果保证的话，我会遇到问题。

狮身人面像居中标题

2 个答案: