## Edited

All images in <https://quarto.org/docs/authoring/figures.html#figure-basics> highlight center-aligne caption while the current design is to left-align captions as mentioned in the documentation.

Images should be updated to be consistent with the current design, thus exhibit caption left-aligned.


## Original issue

<details><summary>See the original issue content</summary>

_Initially discussed in #2304._

It appears for `html` format, `quarto-figure-center` css rule has no effect on caption, _i.e._, it's not possible to reproduce <https://quarto.org/docs/authoring/figures.html#figure-basics> as of Quarto `v1.1.189` (did not try v1.2 pre-release).
<img width="1484" alt="image" src="https://user-images.githubusercontent.com/8896044/188498861-a1a8fa71-414f-45e8-ba36-22874eb6aa68.png">

From the scss rules file: https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/html/_quarto-rules.scss#L93-L101

It we change the inheritance rule, then the expected results can be obtained.

````
---
title: "Untitled"
format: html
---

```{=html}
<style>
.quarto-figure-center > figure {
  text-align: center;
}
</style>
```

## Title

![Elephant](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Elephant_Diversity.jpg/1920px-Elephant_Diversity.jpg){width="50px"}
````

<img width="1624" alt="image" src="https://user-images.githubusercontent.com/8896044/188498927-abaa5bd1-967e-4912-909e-6a8aaf3ebefa.png">


While for `revealjs` format, since the caption is not associated with the image, it is not centered (does not have the `quarto-figure-center` treatment).
It would be nice, to have a consistent behaviour between `html` and `revealjs` for captioned figures.

```html
<section id="title" class="slide level2 present" style="display: block;">
<h2>Title</h2>

<img width="50" class="r-stretch quarto-figure-center" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Elephant_Diversity.jpg/1920px-Elephant_Diversity.jpg" data-lazy-loaded="" style="height: 551px; width: 698.758px;"><p class="caption">Elephant</p>
</section>
```

</details>
cwickham
2022-09-05T18:18:50Z
mcanouil
documentation
v1.4
open
Update images in documentation to highlight left-aligned captions
https://github.com/quarto-dev/quarto-cli/issues/2306