How to vertically align elements inside GitHub Markdown?

Question

How can I vertically align the image and text in the image below?

This is the way I’m writing it in my Markdown:

<a name="version"></a>[ ![Download](https://api.bintray.com/packages/edsilfer/maven/search-interface/images/download.svg) ](https://bintray.com/edsilfer/maven/search-interface/_latestVersion) - **MIN API VERSION: 16**

Babirusa

This would be addressed via CSS. But GitHub doesn't allow you to define CSS on their site, so you probably can't achieve what you want. – Rotarian

@Rotarian or others -- is this still a limitation of Github? – Glynnis

@KiptonBarros yes. GitHub sees that as a security issue and therefore will likely never allow users to define CSS for their site. – Rotarian

Answer 1

I can think of 2 workarounds to this issue

1. create an image with all the text (Download 1.0.0 - MIN API 16)
2. use html for this block (ex. <table><tr><td valign="center"><img ...> text </td></tr></table>)

may not the best way, but it is an improvement :)

Shalom

If the image has a height of 20px, it doesn't work. It works with bigger images though. – Suasion

Answer 2

Table example, using Ofer Skulsky answer suggestion:

<table style="width: 100%; border: none;" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>1</td>
    <td rowspan="3">2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>

• I do not see cellspacing, cellpadding, or border having an effect on GitHub Markdown.

Here is what it looks like on a GitHub README.md:

Tincture

Answer 3

For me, wrapping the text in a <sup> tag has turned to work well enough, e.g.:

<h2 align="left" style="vertical-align: middle;">
    <img src="https://img.shields.io/badge/Download-1.0.0-blue.svg"><sup><sub> - MIN API 16</sub></sup>
</h2>

Of course, it's always going to depend on image and text sizes, but playing with that (if possible) or, as I did above, with the appropriate <sup><sub> combo you may get it, luckily... Anyway, there are not many other options for make it work in a GitHub as of 2024 🙄, so hope it helps!

Devisee