Is vertical-align (or equivalent) usable on a GitHub profile README?

[lmsflms]

Hello,

I want the programming language icons in my GitHub profile README to be vertically aligned with the text (text-top) and appear on the same line. I've tried vertical-align: text-top, but it doesn't work. Is it possible to achieve this, and if so, how can I?

I'm using the <img> element and the icons have the .png file extension.

[Tiimie1]

github profile readmes use a pretty restricted markdown parser so a lot of css doesnt work including vertical-align

here are some things you can try:

use <img align="top" src="..."> or <img align="center" src="..."> - these old html attributes sometimes work better than css
adjust the image size smaller so it naturally aligns better with text height
use <img src="..." height="20"> to match your text size
wrap everything in a table if you need more control over alignment

honestly github strips out most inline styles so your options are pretty limited. the align attribute on img tags is your best bet even though its technically deprecated it still works in github markdown

you could also try wrapping text and images in spans or divs but github is pretty aggressive about sanitizing html so it might just strip it out anyway

[lmsflms]

Alright, adding some transparent space in the bottom of icons and adding align="center" seems to do the trick, thanks for the help!

[Tiimie1]

Great, glad i could help!

[malmorox]

github profile readmes dont support custom css, so inline styles like vertical-align: text-top are ignored. Thats why it doesnt work even though its valid css.

the simplest solution is to control the icon size and let it align naturally with the text baseline:

<img src="..." height="16"/> python, 
<img src="..." height="16"/> c++, 
<img src="..." height="16"/> js, and 
<img src="..." height="16"/> kotlin.

by setting a small height (around 14–18px), the icons align properly with the text on the same line. no css is needed, and this works reliably in github readmes

[Arefin994]

Short answer: not really.

GitHub profile READMEs are rendered with a very restricted Markdown + HTML subset, and most CSS (including vertical-align) is ignored or stripped for security reasons.

What does work

You can usually get acceptable alignment by relying on inline HTML defaults, not CSS:

<img src="icon.png" width="20" height="20" />

[ARORA288]

Short answer: not really.

GitHub profile READMEs are rendered with a very restricted Markdown + HTML subset, and most CSS (including vertical-align) is ignored or stripped for security reasons.

What does work
You can usually get acceptable alignment by relying on inline HTML defaults, not CSS: