html - 如何将图像与 reRestructuredText 居中对齐？

Question

这篇文章说以下指令是对齐图像的一种方法。

.. image:: ./imgs/code.jpg
    :width: 400px
    :align: center

但是，图像不是居中对齐，而是右对齐，我看到生成的 HTML 如下。

<img alt="./imgs/code.jpg" class="align-center" src="./imgs/code.jpg" style="width: 400px;" />

它被定义为 align-center 类，与解释相反：“图像的对齐方式，相当于 HTML 标签的“对齐”属性。”

我什至试图拥有CSS。

.. raw:: html

    <style type="text/css">
      .align-center {
         text-align: center;
         border: 0px;
      }
    </style>

而且它也不起作用。

这有什么问题？

score 4 · Accepted Answer

根据此站点：docutils您可以使用如下特定指令：

.. image:: picture.jpeg
   :align: center

score 1 · Accepted Answer

除了设置:align: center标志之外，将以下 CSS 添加到您的样式表中：

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

score 0 · Accepted Answer

你试过了吗 margin:0px auto;

如果这对您不起作用，则意味着还有其他样式导致此行为。

score 0 · Accepted Answer

使用以下技巧将图像居中对齐

.. raw:: html
   <h1 align="center">
   <a href="your href link"><img width="200" src="image link" alt="text"></a>
   </h1>

4 回答 4