如何在 RestructuredText 中使图片居中对齐？

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标签的"align"属性。

我甚至尝试使用CSS。

.. raw:: html

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

而且它还不能工作。

这是什么问题？

- prosseek

---

你清除了浮动float:none;了吗？或者尝试使用margin: 0px auto;。 - Ish

Answer 1

根据该网站：docutils，你可以使用如下的具体指令：

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

- IF.Francisco.ME

Answer 2

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

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

- m umar Khan

Answer 3

除了设置:align: center标志外，还需在样式表中添加以下CSS：

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

- spookylukey

Answer 4

你试过使用 margin:0px auto; 吗？

如果这个方法对你不起作用，那么可能是其他样式导致了这种行为。

- Hussein