发表新帖
发表新帖

Markdown and image alignment

前端 未结
关注
14 2291
予麋鹿
予麋鹿 2020-12-02 04:06

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

相关标签:
14条回答
  • 不思量自难忘°
    2020-12-02 04:43

    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. */
}
    0 讨论(0)
  • 醉梦人生
    2020-12-02 04:44

    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">
    0 讨论(0)
  • 南笙
    2020-12-02 04:45

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

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-02 04:46

    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.

    0 讨论(0)
  • 庸人自扰
    2020-12-02 04:46

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

    0 讨论(0)
  • 傲寒
    2020-12-02 04:47

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题