Align Images by Middle, Bottom or Top

[RoyiAvital]

Hi,

Assuming I have a set of images defined by:

![](https://i.imgur.com/vU9I0qc.png){width="350"}
![](https://i.imgur.com/2XYIwod.png){width="350"}
![](https://i.imgur.com/7Ln7cLV.png){width="350"}

By default they are aligned by their bottom (Namely if they all get in horizontally, their bottom is aligned).
Is there a way to control it? To have the elements aligned by their top or middle?

[mcanouil]

You mean like the following?

::: {layout-ncol=3 layout-valign="center"}
![](https://i.imgur.com/vU9I0qc.png)

![](https://i.imgur.com/2XYIwod.png)

![](https://i.imgur.com/7Ln7cLV.png)
:::

Source: https://quarto.org/docs/authoring/figures.html#vertical-alignment.

[RoyiAvital]

Will that also resize the image to match the 3 columns?

[RoyiAvital]

By the way, I get:

Maybe another name?

[RoyiAvital]

OK, The key should be "center" instead of "middle":

::: {layout-ncol=3 layout-valign="center"}
![](https://i.imgur.com/vU9I0qc.png)

![](https://i.imgur.com/2XYIwod.png)

![](https://i.imgur.com/7Ln7cLV.png)
:::

The image is contained within the column.

@mcanouil , Could you edit your answer so I can mark it?

Thank You.

[mcanouil]

"center" in html is usually for horizontal alignment while "middle" is for vertical alignment.
This is not the case in Quarto. In VSCode, intellisense shows the proper options, but I only wrote it on my mobile from what I recall and the documentation.

[RoyiAvital]

@mcanouil , I agree. It is also the notation used on PowerPoint and such...

Anyhow, you solved my problem.