Menu
Allow markdown tables to specify their alignment with the :--, :--:, --: syntax while still allowing --- to default to right alignment. This reverts a previous change (part of #2534) that stripped the alignment information from the rendered HTML coming out of the marked renderer.
To center images, text, and anything else in Github markdown and READMEs simply wrap the element in an HTML tag with the align attribute set to "center" .
So, that means to center or align images in GitHub readmes, your only solution is to use the deprecated HTML align attribute (that happens to still function), as this answer shows.
You can embed HTML in Markdown, so you can do something like this:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
I found a nice solution in pure Markdown with a little CSS 3 hack :-)
Follow the CSS 3 code float image on the left or right, when the image alt ends with < or >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):
{.callout}
or, alternatively (Maruku, Kramdown, Python Markdown):
{: .callout}
Then, of course, you can use a stylesheet the proper way:
.callout {
float: right;
}
If yours supports this syntax, it gives you the best of both worlds: no embedded markup, and a stylesheet abstract enough to not need to be modified by your content editor.
I have an alternative to the methods above that used the ALT tag and a CSS selector on the alt tag... Instead, add a URL hash like this:
First your Markdown image code:
Note the added URL hash #center.
Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
You should be able to use a URL hash like this almost like defining a class name and it isn't a misuse of the ALT tag like some people had commented about for that solution. It also won't require any additional extensions. Do one for float right and left as well or any other styles you might want.
I like to be super lazy by using tables to align images with the vertical pipe (|) syntax. This is supported by some Markdown flavours (and is also supported by Textile if that floats your boat):
| I am text to the left |  |
or
|  | I am text to the right |
It is not the most flexible solution, but it is good for most of my simple needs, is easy to read in markdown format, and you don't need to remember any CSS or raw HTML.
Embedding CSS is bad:
CSS in another file:
img[alt=Flowers] { float: right; }
Even cleaner would be to just put p#given img { float: right } in the style sheet, or in the <head> and wrapped in style tags. Then, just use the markdown .
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With