Methods to center a clickable hyperlink in Markdown.

TIL_20230227_HowTo_Markdown.md

How to Center a Clickable Hyperlink in Markdown

Method 1

One way to center a clickable hyperlink in HTML is to use the tag inside a

tag with “text-align:center” style1.

For example:

<p style="text-align: center;">
  <a href="https://www.bing.com">This is a centered clickable link</a>
</p>

Method 2

Another way is to use a list of links and style them with “text-align:center” and "display:inline-block"2.

For example:

<ul style="list-style-type:none;">
  <li style="text-align:center; display:inline-block;">
    <a href="https://www.bing.com">This is a centered clickable link</a>
  </li>
</ul>

Method 3 (Works best for GitHub)

This one worked and tested in GitHub README.md:

<p align="center">
<a href="https://github.com/Pizofreude/github-profile-views-counter">
    <img src="https://komarev.com/ghpvc/?username=Pizofreude">
</a>
</p>

Toggle list

<details> </details>

Usage Example 1

• Dimension modelling for better understanding the dataset
  Click to view the entity–relationship diagram (powered by dbdiagram.io)

  
  

Usage Example 2

We summarize how the components in the data pipeline are set up and where you can find these configurations in this repo.

Usage Example 3

Free Falasteen

This will resize the image to 30% of the available width and height.