Rectangle 27 0

html Markdown and image alignment?


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

The attribute markdown possibility inside markdown.

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.

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

Works fine with michelf's vanilla markdown PHP parser

Note
Rectangle 27 0

html Markdown and image alignment?


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

I'm going to actually side with @yoyo <center> 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. <center> seems so much more natural than thinking about CSS widths, floats, margins I'd even go as far as having a Markdown parser replace <center> tags with appropriate CSS-backed elements, much like how it currently intelligently figures out paragraphs.

Just noticed the OP asked for right alignment -- I was trying to center an image when I stumbled onto this answer.

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

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

Note
Rectangle 27 0

html Markdown and image alignment?


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

Note
Rectangle 27 0

html Markdown and image alignment?


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

Continue markdown text...

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

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

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

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.

Note
Rectangle 27 0

html Markdown and image alignment?


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

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

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)

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.

Note
Rectangle 27 0

html Markdown and image alignment?


'<div> // put image here  </div>`
<div>
![optional img description][1]
</div>

[1]: /image/path
img {
   float: right;
}

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

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:

and in the css that wraps the whole page I can do whatever I want with the image tag:

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.

Note
Rectangle 27 0

html Markdown and image alignment?


![Flowers](/flowers.jpeg)
img[alt=Flowers] { float: right; }

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

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

CSS in another file:

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.

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!

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.

Note
Rectangle 27 0

html Markdown and image alignment?


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

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:

with corresponding stylesheet stylish.css:

Note
Rectangle 27 0

html Markdown and image alignment?


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

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

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

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)

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.

Note
Rectangle 27 0

html Markdown and image alignment?


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

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

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

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)

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.

Note