Markdown and image alignment

Question

I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMD one here in Stack Overflow) would be perfect.

However, they do need the ability to have images right-aligned in a given paragraph.

I can't see a way to do that with the current system - is it possible?

Note that depending on the platform you can add filters to markdown. So it may be possible to add syntax that specifies alignment. — Jordan Reiter, Apr 04 '12 at 18:26
Why not just ask the question without the "I'm helping out a friend with a non-profit site that publishes articles in issues each month"? — JGallardo, Mar 14 '14 at 17:35
@JGallardo Because I wanted to make it clear I didn't have complete control over the system, nor did I have the ability to purchase any type of solution. I agree that I could have phrased the question differently. — Jedidja, Mar 22 '14 at 10:51
Concerning markdown editors, you can use the great https://stackedit.io/editor# , it is awesome to write in it :) — AbdelHady, Feb 15 '15 at 16:02
Possible duplicate of [github README.md center image](https://stackoverflow.com/questions/12090472/github-readme-md-center-image) — Innat, Jul 08 '18 at 11:32
@iPython How can a question from 2008 be a duplicate of a question asked 4 years later (2012)? — Jedidja, Jul 09 '18 at 13:20

score 269 · Accepted Answer · edited Aug 17 '15 at 02:59

269

You can embed HTML in Markdown, so you can do something like this:

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

edited Aug 17 '15 at 02:59

Brendon Muir

4,540
2
33
55

answered Oct 31 '08 at 22:47

Greg Hewgill

951,095
183
1,149
1,285

47

Clean it up & standardize by strippnig the unnecessary `div` and adding a closing slash to the `img` tag, respectively, i.e. ` – ma11hew28 Nov 14 '10 at 14:54
Instead of `div` I prefer using `span` for inline indenting. For full paragraph centering `div` is good, or even simple `p`. – esengineer Sep 06 '12 at 11:15
27

This work better with some sanitized interpreters like the GitHub's one: – benweet May 05 '13 at 09:50
21

@MattDiPasquale Closing slashes are not necessary. That's XHTML, not HTML. – CaptSaltyJack Dec 13 '13 at 21:10
i tried this to embed an image in a ghost blog post; using
flowed the following paragraph around the image correctly, whereas put the paragraph and the image in side-by-side boxes. – Martin DeMello Jun 02 '15 at 20:55
What a designer flaw.. the need of html. – Jeroen van Langen Apr 14 '22 at 13:45
1

@benweet, thank you for that, was hard to find that information. – luizv Aug 26 '23 at 04:57

OzzyCzech · Answer 2 · 2019-01-31T09:00:39.877

106

I found a nice solution in pure Markdown with a little CSS 3 hack :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

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;
}

edited Jan 31 '19 at 09:00

answered Sep 21 '16 at 11:12

OzzyCzech

9,713
3
50
34

1

Where should the CSS be placed in the MkDocs directory? @YannDuran – Joseph Tesfaye May 10 '18 at 10:05
3

@IvanHuang just make sure that you add an [_extra.css_](http://www.mkdocs.org/user-guide/styling-your-docs/#customizing-a-theme) file as per the MkDocs documentation, and put the css in that file. – Yann Duran May 25 '18 at 05:21

gerwitz · Answer 3 · 2017-02-03T08:57:39.503

61

Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

or, alternatively (Maruku, Kramdown, Python Markdown):

![Flowers](/flowers.jpeg){: .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.

edited Feb 03 '17 at 08:57

answered Apr 29 '13 at 12:12

gerwitz

1,096
10
13

By the time you write all of this: ![Flowers](/flowers.jpeg){: .callout} you may as well have written – lfalin Sep 25 '14 at 03:13
1

I agree, but Markdown is often chosen for users that are not *ML-literate so there's no reason to prefer HTML over any other arbitrary syntax. – gerwitz May 08 '15 at 07:34
4

("No reason" is over-simplifying of course. There are many UX reasons you might want your editors to either get closer or farther from the final HTML rendering. Or you might be averse to introducing an HTML dependancy in your content, if you've chosen Markdown to abstract the rendering technique.) – gerwitz May 08 '15 at 07:38

score 61 · Answer 4 · edited Oct 19 '18 at 04:42

61

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:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

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.

edited Oct 19 '18 at 04:42

Peter Mortensen

30,738
21
105
131

answered Apr 29 '17 at 03:22

tremor

3,068
19
37

1

Exactly what I was looking for. You are a life savior. One thing I would like to add, is ``` h1 h2{ clear: both }``` So that next heading starts in new line (doesn't overlap with image) – bhar1red Nov 11 '18 at 22:36
looks like what I'm looking for but... how do I make a CSS? and how do I call it in Markdown? – Anthony D Nov 16 '18 at 07:35
this is also great solution same as mine :) – OzzyCzech Jan 31 '19 at 09:03
7

@OzzyCzech - no not really, your solution misuses the image "alt" tag which could be bad for accessibility compliance on a page, where this solution uses a non-invasion approach via the src tag. – tremor Feb 01 '19 at 18:44
Thanks, but how can I change all images to the center (using a single CSS file)? – Luis Feb 20 '21 at 19:33
Thanks, any way to align *all* images to the center using CSS ? – Luis Feb 20 '21 at 19:49

score 34 · Answer 5 · edited Oct 19 '18 at 04:34

34

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  | ![Flowers](/flowers.jpeg) |

or

| ![Flowers](/flowers.jpeg) | 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.

edited Oct 19 '18 at 04:34

Peter Mortensen

30,738
21
105
131

answered Jan 24 '13 at 18:33

learnvst

15,455
16
74
121

2

I like this style, very markdown-y. Too bad it doesn't work on github (not yet anyway.) – Eliot May 02 '14 at 15:58
4

I have just tried this syntax at GitHub and it appears to work now. – Ege Rubak Sep 04 '14 at 10:50
12

This is an interesting hack, but it's misusing tables for layout. Welcome to 1999. – jxpx777 Mar 06 '15 at 04:12
4

For the github flavored markdown, add a line with `|-|-|`. It tells the parser that there is a table, and the first line is a header. Ex: http://goo.gl/xUCRiK – Kayla Feb 25 '16 at 16:07

score 28 · Answer 6 · answered Feb 19 '11 at 22:51

28

Embedding CSS is bad:

![Flowers](/flowers.jpeg)

CSS in another file:

img[alt=Flowers] { float: right; }

answered Feb 19 '11 at 22:51

73

What? Now all of a sudden you have to edit an external file every time you change the markdown content? Doesn't sound like a good solution to me. – Jordan Reiter Jul 20 '11 at 18:21
10

@JordanReiter Everyone here has written a program consisting of more than one file where logic is spread/organized over many locations. We do it on purpose for maintainability. Why is this so painfully and terribly different? – Mark Bolusmjak Apr 04 '12 at 17:43
10

Markdown lets non-programmer users create content and it shouldn't be dependent on files that have to be directly accessed and edited on the server. Another example: I think it's totally normal to hard-code the *names* of fields in a database into your code but a mistake to hard-code based on the *value* of a field in your database (i.e. `if product.name == 'Tulips'`) because you can't depend on the stability of the value. All it takes is someone changing `Flowers` to `Flower` and suddenly that image pops out of view. Also, they have to call you every time they add an image! – Jordan Reiter Apr 04 '12 at 18:24
Thanks, I've found this very handy. The accepted solution does not seem to work on a Jekyll-based github-hosted site. I set the alt text to be "floatright", since I don't care what alttext is, this is a nice way to easily control my image placement in markdown. – cboettig Apr 12 '12 at 00:08
28

@cboettig This is severe misuse of the alt tag. It is supposed to be a textual description of the image for people who can't see the image. – Nathan Grigg May 15 '12 at 23:37
@nathang Indeed it is, I agree entirely. But seeing as very few people bother including alt text these days (i.e. examples in this list) I think that having alttext that tells you there's a floatright image isn't much worse than no alttext, and I give WTP'- props for creativity here. The markdown is still valid markdown this way. – cboettig May 16 '12 at 18:07
5

I am amazed so many people crying over this solution. This is a beautiful hack, necessary for solving a problem for certain hosting services. The poster who gave this beautiful hack is gone now and instead the community is left with crybabies. – Aaron Robinson Feb 08 '14 at 04:37
2

For the compliant-freaks up there, use `![My incredibly useful alt text -right]` and `img[alt$="-right"] { float: right }`. That way you end up with 100% compliant Markdown, HTML, disabled-enhanced XHTML5 and god knows what. – Christophe Marois Jul 31 '15 at 22:13
2

Christophe: Please see Nathan Grigg's comment to understand why that's a bad idea. You're mixing display information with your data, which is bad, but you're also doing it in a way that will actually be visible to users who hover or who use text-based browsers. – David Grayson Sep 08 '16 at 00:55
If you like this solution see my alternative using a different method that doesn't muck with the ALT attribute and instead uses a #hash on the image src. – tremor Apr 29 '17 at 03:27

score 12 · Answer 7 · edited Oct 19 '18 at 04:30

12

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

The attribute markdown possibility inside Markdown.

edited Oct 19 '18 at 04:30

Peter Mortensen

30,738
21
105
131

answered Aug 04 '09 at 15:18

1

Worked to me. I am not using github. Thanks @raphox. – Hugo Lopes Tavares Feb 23 '12 at 15:13
Works fine with [michelf's](https://github.com/michelf/php-markdown) vanilla markdown PHP parser – Ronan Jul 07 '13 at 14:53
3

This is Markdown Extra functionality, which is included in some content management systems (e.g. Drupal), but is not included functionality in Markdown per se. – Tim May 15 '14 at 13:05
I've started using Astro recently and have noticed that while this markup doesn't work, a slightly adapted version with `` instead of `
` actually does work in [Astro with the default configuration](https://docs.astro.build/en/guides/markdown-content/): `![book](/images/book01.jpg)` (It even works with line breaks, but comment formatting doesn't allow line break here.)
– goetz May 27 '23 at 11:24

score 10 · Answer 8 · answered Nov 14 '10 at 15:08

10

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 ![Alt text](/path/to/img.jpg).

answered Nov 14 '10 at 15:08

ma11hew28

121,420
116
450
651

score 8 · Answer 9 · edited Oct 19 '18 at 04:39

8

If you implement it in Python, there is an extension that lets you add HTML key/value pairs, and class/id labels. The syntax is for this is:

![A picture of a cat](cat.png){: style="float:right"}

Or, if embedded styling doesn't float your boat,

![A picture of a cat](cat.png){: .floatright}

with a corresponding stylesheet, stylish.css:

.floatright {
    float: right;
    /* etc. */
}

edited Oct 19 '18 at 04:39

Peter Mortensen

30,738
21
105
131

answered Sep 27 '13 at 00:36

jameh

1,149
3
12
20

score 8 · Answer 10 · edited May 23 '17 at 12:02

I liked learnvst's answer of using the tables because it is quite readable (which is one purpose of writing Markdown).

However, in the case of GitBook's Markdown parser I had to, in addition to an empty header line, add a separator line under it, for the table to be recognized and properly rendered:

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Separator lines need to include at least three dashes --- .

score 3 · Answer 11 · edited Oct 19 '18 at 04:38

As greg said you can embed HTML content in Markdown, but one of the points of Markdown is to avoid having to have extensive (or any, for that matter) CSS/HTML markup knowledge, right? This is what I do:

In my Markdown file I simply instruct all my wiki editors to embed wrap all images with something that looks like this:

'<div> // Put image here  </div>`

(of course.. they don't know what <div> means, but that shouldn't matter)

So the Markdown file looks like this:

<div>
![optional image description][1]
</div>

[1]: /image/path

And in the CSS content that wraps the whole page I can do whatever I want with the image tag:

img {
   float: right;
}

Of course you can do more with the CSS content... (in this particular case, wrapping the img tag with div prevents other text from wrapping against the image... this is just an example, though), but IMHO the point of Markdown is that you don't want potentially non-technical people getting into the ins and outs of CSS/HTML.. it's up to you as a web developer to make your CSS content that wraps the page as generic and clean as possible, but then again your editors need not know about that.

score 2 · Answer 12 · answered Apr 23 '22 at 16:50

2

You can directly use align property:

   <img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">

answered Apr 23 '22 at 16:50

Chetan B B

31
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 24 '22 at 00:41

score 1 · Answer 13 · edited Oct 19 '18 at 04:44

1

I had the same task, and I aligned my images to the right by adding this:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

For aligning your image to the left or center, replace

<div style="text-align: right">

with

<div style="text-align: center">
<div style="text-align: left">

edited Oct 19 '18 at 04:44

Peter Mortensen

30,738
21
105
131

answered Feb 09 '18 at 05:26

Zuha Karim

249
4
13

I tried this but it is now working.. image is aligned but the html text displays. – fiza khan Feb 10 '18 at 04:41

score 1 · Answer 14 · answered Jun 17 '23 at 07:09

1

![Alt Text](image URL){ align=right }

Check this ultimate guide for Markdown image styling for more here

answered Jun 17 '23 at 07:09

Nikhil Dash

11
1

N. Joppi · Answer 15 · 2022-08-18T06:17:01.277

The best and most customizable option:

<div style="display:flex; align-items: center;">
     <div style="flex:1">
          <img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135@1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/>
     </div>
     <div style="flex:1;padding-left:10px;">
          <img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781@1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" />
     </div>
</div>

This will align the first to the left, and the second to the right. Works for more than 2 images too.

score 0 · Answer 16 · answered Sep 14 '22 at 18:41

For a simple approach to just indenting your image a bit, just use some non-breaking spaces with an img element. E.g.,      <img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />

score -1 · Answer 17 · answered Oct 28 '21 at 03:23

Align image and text side-by-side as part of a paragraph in a single block, within a warning box.

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

Output :

score -1 · Answer 18 · answered Mar 29 '22 at 08:33

-1

I think the easiest solution is to directly specify align="right":

<img align="right" src=/logo.png" alt="logo" width="100"/>

answered Mar 29 '22 at 08:33

dopexxx

2,298
19
30

score -2 · Answer 19 · answered May 20 '20 at 19:07

-2

this work for me

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

answered May 20 '20 at 19:07

Andersonfrfilho

130
11

score -17 · Answer 20 · answered Dec 13 '11 at 05:58

-17

Simplest is to wrap the image in a center tag, like so ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Anything to do with Markdown can be tested here - http://daringfireball.net/projects/markdown/dingus

Sure, <center> may be deprecated, but it's simple and it works!

answered Dec 13 '11 at 05:58

yoyo

59

1

Just noticed the OP asked for right alignment -- I was trying to center an image when I stumbled onto this answer. – yoyo Dec 15 '11 at 06:59
12

I'm going to actually side with @yoyo— `` does make sense. It's deprecated from HTML because HTML is supposed to describe the content only; styles should be in stylesheets. However, Markdown has a different intent: to include enough styling necessary to convey a textual message, and leave the rest up to the renderer/site. `` seems so much more natural than thinking about CSS `width`s, `float`s, `margin`s…— I'd even go as far as having a Markdown parser replace `` tags with appropriate CSS-backed elements, much like how it currently intelligently figures out paragraphs. – Slipp D. Thompson Jun 09 '12 at 20:32

Markdown and image alignment

20 Answers20

Linked