Search code examples
githubmarkdowngithub-flavored-markdownreadme

How do you center a netlify badge on a README.md?


I'm having a hard time centering my netlify badge on my readme, using a p tag with an align of "center" doesn't seem to work. What would be the proper way?

This is the code I have so far:

<p align="center">
    
[![Netlify Status](https://api.netlify.com/api/v1/badges/bc438b2e-9f12-4bbe-987e-d36fcef20a2f/deploy-status)](https://app.netlify.com/sites/darienmiller/deploys)
</p>

Netlify Status


Solution

  • Markdown doesn't allow you to tweak alignment directly

    Use an img tag instead of markdown.

    <p align="center">
      <img src="https://api.netlify.com/api/v1/badges/bc438b2e-9f12-4bbe-987e-d36fcef20a2f/deploy-status">
    </p>
    

    If you review the generated HTML by the Markdown method, your paragraph tag is terminated before the image, preventing the centering from being applied.