Following #3294 and its fix #3433

this is supposed to work 

````yaml
---
title: "test"
format: html 
keep-md: true
---

```{mermaid}
%%| fig-cap: Mermaid diagram
%%| fig-align: center
flowchart TB
a --> b 
b --> c
```
````

However it is not. 

This is because we do in JS now 
https://github.com/quarto-dev/quarto-cli/blob/fbc12cbc4f406f02981011544765552e0ea9078a/src/resources/formats/html/mermaid/mermaid-init.js#L215-L224

but somehow we have more div than expected. The `layout-align` is one div above. 

 This is the intermediate md 

````markdown
---
title: "test"
format: html 
keep-md: true
---

:::{.cell layout-align="center"}

:::{.cell-output-display}

:::{}

:::{}

<pre class="mermaid mermaid-js">flowchart TB
a --&gt; b 
b --&gt; c
</pre>
:::


Mermaid diagram
:::
:::
:::

````

and the HTML rendered in preview
````
<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<div>
<div>
<svg ...>(SVG CONTENT</svg>
</div>
<p>Mermaid diagram</p>
</div>
</div>
</div>
````

@cscheid I let you see this because 
* Either we need to add one more parentElement
```diff
-const div = svg.parentElement.parentElement.parentElement;
+const div = svg.parentElement.parentElement.parentElement.parentElement;
```
* We need to see why we create those empty div in the markdown - maybe there is one more that we expect.

### Discussed in https://github.com/quarto-dev/quarto-cli/discussions/4375

<div type='discussions-op-text'>

<sup>Originally posted by **wilcar** February 16, 2023</sup>
How can I center a mermaid diagram in a html document ?</div>
cscheid
2023-02-16T08:48:39Z
cderv
bug crossref mermaid
v1.4
open
Center mermaid diagram in a html document with `fig-align` does not work
https://github.com/quarto-dev/quarto-cli/issues/4376