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

User · Answer

I found a nice solution in pure Markdown with a little CSS nbsp 3 hack  -     image alt  gt    image-right jpg    image alt  lt    image-left jpg    image alt  gt  lt    center-image jpg    Follow the CSS 3 code float image on the left or right  when the image alt ends with  lt  or  gt    img alt    gt        float  right     img alt    lt        float  left     img alt    gt  lt        display  block    max-width  100     height  auto    margin  auto    float  none important

User · Answer

Even cleaner would be to just put p given img   float  right   in the style sheet  or in the  lt head gt  and wrapped in style tags  Then  just use the markdown   Alt text   path to img jpg

User · Answer

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

User · Answer

lt div style  float left margin 0 10px 10px 0  markdown  1  gt        book   images book01 jpg   lt  div gt    The attribute markdown possibility inside Markdown

User · Answer

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

User · Answer

I had the same task  and I aligned my images to the right by adding this    lt div style  text-align  right  gt  lt img src   default image sms png  width  100    gt  lt  div gt    For aligning your image to the left or center  replace   lt div style  text-align  right  gt    with   lt div style  text-align  center  gt   lt div style  text-align  left  gt

User · Answer

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

User · Answer

You can embed HTML in Markdown  so you can do something like this    lt img style  float  right   src  whatever jpg  gt   Continue markdown text

User · Answer

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     lt div gt     Put image here   lt  div gt      of course   they don t know what  lt div gt  means  but that shouldn t matter   So the Markdown file looks like this    lt div gt    optional image description  1   lt  div gt    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

User · Answer

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

User · Answer

Embedding CSS is bad     Flowers   flowers jpeg    CSS in another file   img alt Flowers    float  right

User · Answer

lt div style  float left margin 0 10px 10px 0  markdown  1  gt        book   images book01 jpg   lt  div gt    The attribute markdown possibility inside Markdown

User · Answer

Simplest is to wrap the image in a center tag  like so       lt center gt   Alt test  http   upload wikimedia org wikipedia en b bc Wiki png  lt  center gt    Anything to do with Markdown can be tested here - http   daringfireball net projects markdown dingus  Sure   lt center gt  may be deprecated  but it s simple and it works

User · Answer

You can embed HTML in Markdown  so you can do something like this    lt img style  float  right   src  whatever jpg  gt   Continue markdown text

User · Answer

Embedding CSS is bad     Flowers   flowers jpeg    CSS in another file   img alt Flowers    float  right

User · Answer

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

User · Answer

this work for me    lt p align  center  gt    lt img src   LogoOfficial png  width  300   gt   lt  p gt

User · Answer

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

User · Answer

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     lt div gt     Put image here   lt  div gt      of course   they don t know what  lt div gt  means  but that shouldn t matter   So the Markdown file looks like this    lt div gt    optional image description  1   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

this work for me    lt p align  center  gt    lt img src   LogoOfficial png  width  300   gt   lt  p gt

User · Answer

Even cleaner would be to just put p given img   float  right   in the style sheet  or in the  lt head gt  and wrapped in style tags  Then  just use the markdown   Alt text   path to img jpg

User · Answer

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

User · Answer

Simplest is to wrap the image in a center tag  like so       lt center gt   Alt test  http   upload wikimedia org wikipedia en b bc Wiki png  lt  center gt    Anything to do with Markdown can be tested here - http   daringfireball net projects markdown dingus  Sure   lt center gt  may be deprecated  but it s simple and it works

User · Answer

You can embed HTML in Markdown  so you can do something like this    lt img style  float  right   src  whatever jpg  gt   Continue markdown text

User · Answer

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

User · Answer

You can embed HTML in Markdown  so you can do something like this    lt img style  float  right   src  whatever jpg  gt   Continue markdown text

User · Answer

I had the same task  and I aligned my images to the right by adding this    lt div style  text-align  right  gt  lt img src   default image sms png  width  100    gt  lt  div gt    For aligning your image to the left or center  replace   lt div style  text-align  right  gt    with   lt div style  text-align  center  gt   lt div style  text-align  left  gt

User · Answer

I found a nice solution in pure Markdown with a little CSS nbsp 3 hack  -     image alt  gt    image-right jpg    image alt  lt    image-left jpg    image alt  gt  lt    center-image jpg    Follow the CSS 3 code float image on the left or right  when the image alt ends with  lt  or  gt    img alt    gt        float  right     img alt    lt        float  left     img alt    gt  lt        display  block    max-width  100     height  auto    margin  auto    float  none important

[html] Markdown and image alignment

Examples related to html

Examples related to css

Examples related to markdown