Question

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)

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top