How do I align figure caption to left, but up to the figure edge?

[HojinCho]

Description

Suppose, in a blog-post writing, I have a very small figure with a short caption.

![Short caption](small_fig.jpg)

Then, the figure caption tries to migrate away from the figure itself and want none of the figure itself.

To solve this, one way I found is this

::: {style="text-align:center;"} 
![Short caption](small_fig.jpg)
:::

Although, this makes it out of style because all other figure captions are left-aligned.

What I want is the figure itself is center aligned, and the figure caption starts at the leftmost edge of the figure, but left-aligned. This may go multiple lines, but at least it should be bound by the width of the figure. How do I do this?

[mcanouil]

As documented figures are centred and captions left aligned by default.

There are various discussions already on this topics (I let you search for them).

This being said figure alignment can be controlled as many other components, see the documentation: https://quarto.org/docs/authoring/figures.html

What I want is the figure itself is center aligned, and the figure caption starts at the leftmost edge of the figure, but left-aligned.
This may go multiple lines, but at least it should be bound by the width of the figure. How do I do this?

If you are only using HTML, you need to figure out the right CSS rule to make what you want.
There are pretty good resources online about CSS.
You can use your favourite browser developer/inspect mode to live edit your page and see what you need to modify with what to get the desired result.

This may go multiple lines, but at least it should be bound by the width of the figure.

That's your point of view which I personally disagree because it would make the layout very weird for small width figure with very long caption.
Quarto is unlikely to make this change unless the community really wants it.

[HojinCho]

Thank you for the answer, but I have gone through the document in the link you provided for at least 4 times, and found nothing I wanted.

The feature I wanted to ask is not about the "alignment" of the caption nor figure (sorry for the poor wording in the title), but the boundaries of where captions can be relative to the figure, without changing the figure itself.

[mcanouil]

Here is one approach (not perfect) because I had some spare time but I think this is a bad idea which is obvious.
I won't explain the approach nor the code, so you'll have to learn CSS/HTML/JavaScript if you don't understand.

Details

---
title: "Quarto Playground"
format: html
include-in-header:
  - text: |
      <style>
        figure {
          display: block;
          margin: 0 auto;
        }
      </style>
include-after-body:
  - text: |
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          var img = document.querySelector("#fig-placeholder img");
          var figure = document.querySelector("#fig-placeholder figure");
          if (img && figure) {
            figure.style.width = img.clientWidth + "px";
          }
        });
      </script>
---

This is a playground for Quarto.

::: {#fig-placeholder}
![]({{< placeholder 60 40 >}})

{{< lipsum 1 >}}
:::


::: {#fig-placeholder2}
![]({{< placeholder 600 40 >}})

{{< lipsum 1 >}}
:::

[HojinCho]

Well, this is great and exactly what I was looking for! Thank you for taking your time to provide this.