Rectangle 27 15

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) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

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.

I like this style, very markdown-y. Too bad it doesn't work on github (not yet anyway.)

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: goo.gl/xUCRiK

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 15

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) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

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.

I like this style, very markdown-y. Too bad it doesn't work on github (not yet anyway.)

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: goo.gl/xUCRiK

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 120

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

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

Continue markdown text...

Clean it up & standardize by strippnig the unnecessary div and adding a closing slash to the img tag, respectively, i.e. `<img style="float:right" src="whatever.jpg" />

Instead of div I prefer using span for inline indenting. For full paragraph centering div is good, or even simple p.

This work better with some sanitized interpreters like the GitHub's one: <img align="right" src="whatever.jpg" />

@MattDiPasquale Closing slashes are not necessary. That's XHTML, not HTML.

i tried this to embed an image in a ghost blog post; using <div style="float:right"><img ...></div> flowed the following paragraph around the image correctly, whereas <img style="float: right" ...> put the paragraph and the image in side-by-side boxes.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 120

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

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

Continue markdown text...

Clean it up & standardize by strippnig the unnecessary div and adding a closing slash to the img tag, respectively, i.e. `<img style="float:right" src="whatever.jpg" />

Instead of div I prefer using span for inline indenting. For full paragraph centering div is good, or even simple p.

This work better with some sanitized interpreters like the GitHub's one: <img align="right" src="whatever.jpg" />

@MattDiPasquale Closing slashes are not necessary. That's XHTML, not HTML.

i tried this to embed an image in a ghost blog post; using <div style="float:right"><img ...></div> flowed the following paragraph around the image correctly, whereas <img style="float: right" ...> put the paragraph and the image in side-by-side boxes.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 7

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

The attribute markdown possibility inside markdown.

Worked to me. I am not using github. Thanks @raphox.

Works fine with michelf's vanilla markdown PHP parser

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.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 7

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

The attribute markdown possibility inside markdown.

Worked to me. I am not using github. Thanks @raphox.

Works fine with michelf's vanilla markdown PHP parser

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.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 41

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

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

By the time you write all of this: !Flowers{: .callout} you may as well have written <img src="/flowers.jpeg" class="callout"/>

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.

("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.)

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 41

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

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

By the time you write all of this: !Flowers{: .callout} you may as well have written <img src="/flowers.jpeg" class="callout"/>

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.

("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.)

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 22

![Flowers](/flowers.jpeg)

CSS in another file:

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

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.

@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?

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!

@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.

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.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 22

![Flowers](/flowers.jpeg)

CSS in another file:

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

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.

@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?

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!

@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.

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.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 17

I am found nice solution in pure Markdown with a little CSS3 hack :-)

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

Follow CSS3 code float image on left or right, when 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;
}

Thank you! This worked for me with an Mkdocs site. +1

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 17

I am found nice solution in pure Markdown with a little CSS3 hack :-)

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

Follow CSS3 code float image on left or right, when 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;
}

Thank you! This worked for me with an Mkdocs site. +1

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 8

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).

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 8

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).

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 6

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"}
![A picture of a cat](cat.png){: .floatright}

with corresponding stylesheet stylish.css:

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

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 6

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"}
![A picture of a cat](cat.png){: .floatright}

with corresponding stylesheet stylish.css:

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

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 2

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

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 2

I have an alternative on the methods above that used the ALT tag and a CSS selector on the alt tag.. instead, add a URL hash like this:

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

Note the added url hash #center.

Now add this rule in CSS using CSS3 attribute selectors to select images with a certain path.

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.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 2

I have an alternative on the methods above that used the ALT tag and a CSS selector on the alt tag.. instead, add a URL hash like this:

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

Note the added url hash #center.

Now add this rule in CSS using CSS3 attribute selectors to select images with a certain path.

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.

html - Markdown and image alignment - Stack Overflow

html css markdown
Rectangle 27 2

As greg said you can embed html 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:

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

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

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

[1]: /image/path

and in the css 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.. (in this particular case, wrapping the img 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-dev to make your css that wraps the page as generic and clean as possible, but then again your editors need not know about that.

html - Markdown and image alignment - Stack Overflow

html css markdown