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

Question

This post says the following directive is a way to align image.

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

However, the image is not center aligned, but right aligned, and I see the HTML generated as follows.

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

It's defined in as the align-center class contrary to the explanation : "The alignment of the image, equivalent to the HTML tag's "align" attribute."

I even tried to have the CSS.

.. raw:: html

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

And it also doesn't work.

What's wrong with this?

Answer 1

According to this site: docutils you can use a specific directive like the following:

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

Answer 2

As well as setting the :align: center flag, add the following CSS to your stylesheet:

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

Answer 3

did you try margin:0px auto;

If this doesn't work for you, it means there are other styling causing this behavior.

Answer 4

Use the following hack to align the image in the center

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