Images not aligned to center when :align: center is specified

[johnthagen]

If I create some RST like:

.. image:: ../my_image.png
  :align: center
  :scale: 60%

I noticed that unlike vanilla Sphinx the image is not aligned to the center of the page, and is still right justified instead.

• reference to docs about .. image::

[johnthagen]

I played around and confirmed that other .. image:: directives, like :scale: do work. Only one that I can find that doesn't work is :align:.

[johnthagen]

@bashtage I'd like to try to help out with this issue. Could you point me in the direction where this would be added/fixed?

[johnthagen]

I was able to reproduce this on the demo site but updating docs/index.rst to:

===================
Material for Sphinx
===================

.. image:: images/screenshot.png
    :alt: Material for Sphinx Screenshots
    :scale: 20%
    :align: center

...

Note that image is not aligned to center. Also right does not align it to the right.

[johnthagen]

When I inspect the element, I see that the align-center class is being applied, so perhaps just some CSS is missing?

[johnthagen]

Built example in case someone wants to manually inspect the output:

• sphinx-material-image-not-aligned-html.zip

[bashtage]

I assume that there is no css for img.align-center or img.align-right.

[johnthagen]

Thanks, where would the best place to add this be?

[johnthagen]

Confirmed that the CSS was missing. I was able to temporarily work around this issue by including the following custom CSS in my Sphinx project:

# conf.py
def setup(app) -> None:
    app.add_css_file('css/custom.css')

/* custom.css */
.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

[johnthagen]

It appears that .. list-table:: are not also aligned when sphinx-material is applied.

.. list-table:: Table
   :header-rows: 1
   :align: center

   ...