How to center an image in Azure DevOps

user_968759 0
Viewed 4464

I uploaded an image as attachment in my wiki page... here the code generated to the page:

![myImage.png](/.attachments/MyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png)

I would like to center this image. But I cannot.

I tried to wrap that YAML code inside an HTML div.. but it's like i cannot insert YAML tags inside HTML tag...

I also tried to add the style tag, but style tag is not supported in Azure devOps Wiki pages.

Finally I tried to add a HTML img tag instead of yaml, but it does not recognize therelative path of the uploaded image...

Does a way to center the image exist?

Thank you

azure-devops yaml html
2 Answers

Nowadays

Based on the answer of rickvdbosch it can be done simply with:

<center>

![image.png](/.attachments/image-b2195f3b-f3af-467b-b9d6-0853b1cd7d08.png)

</center>

Without the need of a blob storage in Azure but just with the relative path created by Azure DevOps when inserting the image.

Steps:

  1. Copy paste an image in the wiki editor / markdown, or use the insert file menu command
  2. Put the <center> tags around it
  3. Add some padding or other styling to the <center> tag
user_4689100

Figure out the entire path (or the right relative one) for the image and put it in an img-tag inside a <center> tag. When inserting a file in a Wiki, I get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.

<center>
    <img src="blob:https://dev.azure.com/SOME-GUID" />
</center>

Centered image in Azure DevOps Wiki

If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.

EDIT:
I have migrated my Organization to "Use the new URL: https://dev.azure.com/MY-ORGANIZATION/" (from Organization Settings - Overview). This might have impact on the way attached files are uploaded, although a different organization I'm in hasn't upgraded to the new URL yet, and also gets a decent blob:blob:https://dev.azure.com/SOME-GUID url for attached files.

user_19455250
Related