Search code examples
githubgithub-flavored-markdown

Align images in github-flavored-markdown


I have these badges in my Github repo:

enter image description here

How can I make them align to left (the 2 above) and to right the one under?

They are in the format ![description](url)


Solution

  • One way would be to use html table (since markdown table in GFM doesn't support merged cell)

    this, for instance, seems to align the pictures properly within a README.md file.

    <table >
      <tr>
        <td align="left"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/add-icon.png"/></td>
        <td align="right"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/info-icon.png"/></td>
      </tr>
      <tr>
        <td colspan="2"><img src="http://icons.iconarchive.com/icons/shwz/disney/512/pumbaa-icon.png"/></td>
      </tr>
    </table>
    

    Result:

    result

    In your case:

    <table>
      <tr >
        <td><img src="https://api.travis-ci.org/axemclion/grunt-saucelabs.png?branch=master"/></td>
        <td align="right"><img src="https://saucelabs.com/buildstatus/grunt-sauce"/></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://saucelabs.com/browser-matrix/grunt-sauce.svg"/></td>
      </tr>
    </table>
    

    Which gives:

    with svg