【问题标题】:Markdown `native` text alignmentMarkdown `native` 文本对齐
【发布时间】:2012-12-27 08:37:26
【问题描述】:

markdown 是否支持 native 不使用 html + css 的文本对齐?

【问题讨论】:

  • 对于 GitHub 风格的 Markdown<p align=center> 有效。 (来自this answer below

标签: markdown


【解决方案1】:

native markdown 不支持没有html + css的文本对齐。

【讨论】:

  • 因此将您的文本包装在 <p style="text-align: center;"></p> 中,这应该适用于任何降价
  • Github 用户: 内联样式在 github 上不起作用,并且不包含在 Github Flavored Markdown 的扩展功能中。这是all github supports as of Jan 2017。有许多在线 Markdown 测试人员说他们遵守 GFM 并显示内联样式等工作,但 github markdown [几乎]* 目前不支持 HTML/CSS。 *<br> 有效,因此可能有一些隐藏标签有效。
  • Github 用户:截至 2017 年 6 月 8 日,Diego Vinícius 下面的回答成功地将文本集中在降价文件中。只需将您的文本包装在p 标记中,并将align 设置为center,如下所示:<p align="center">centered text</p>
  • 顺便说一句,<div><p> 哪个更好用? p 是一个段落,所以 div 可能是一个更中性和更好的选择?
  • @SDJMcHattie 这在将 .md 转换为 .pdf 时不起作用。
【解决方案2】:

为了使 md 文件中的文本居中,您可以使用 center 标签,如 html 标签:

<center>Centered text</center>

【讨论】:

  • 此方法在 html 5 中已弃用。
  • 此方法适用于 SquareSpace Markdown 块,截至 2018 年 8 月 15 日。
  • 现在首选哪种方法?
【解决方案3】:

我知道这不是降价,但&lt;p align="center"&gt; 为我工作,所以如果有人弄清楚降价语法,我会很乐意使用它。在此之前,我将使用 HTML 标记。

【讨论】:

  • align 属性自 HTML 4 起已弃用,自 HTML 5 起已过时。
  • 虽然上述答案不起作用,但此方法成功地将一些文本为我在 github 上居中。
  • 刚刚在 github 上测试过:它适用于文本,它不适用于图像。
  • 如果 html 标签有效,你不能用 p 标签对齐 o 简单对齐,尝试用
    在 div 中添加图片
  • @JindrichVavruska 现在应该用 Markdown 代替什么?
【解决方案4】:

div 元素有自己的对齐属性align

<div align="center">
  my text here.
</div>

【讨论】:

  • 最佳解决方案。我们可以用“justify”代替“center”。适用于 div 内的所有内容而不扭曲任何内容。
  • 为了防止 div 中的内联 MarkDown 语法中断和无法呈现,请考虑在打开的 &lt;div 标记后添加一个空行。我发现可以防止这种情况发生。
  • 这是唯一效果更好的解决方案。谢谢
【解决方案5】:

这很 hacky,但如果您使用 GFM 或其他支持使用管道构建表的 MD 语法,您可以使用列对齐功能:

|| <!-- empty table header -->
|:--:| <!-- table header/body separator with center formatting -->
| I'm centered! | <!-- cell gets column's alignment -->

这在标记中有效。

【讨论】:

  • 如何绕过这个来申请标题?如果我在“|”中使用普通的“#”它逐字出现。
  • 这似乎只适用于文本。我正在尝试使图像居中。
【解决方案6】:

在 Github 中你需要写:

<p align="justify">
  Lorem ipsum
</p>

【讨论】:

  • 我喜欢用“索引”列表开始更长的 README.md 文件。我把它放在每个部分的末尾,以防读者想回到索引&lt;p align="right"&gt;[Index](#index)&lt;/p&gt; 效果很好:)
  • 此解决方案有效,但某些样式(如斜体文本)丢失了。
  • @JavDomGom 尝试在打开的&lt;div 标记后添加一个空行,然后应该保留您的内联元素样式。
【解决方案7】:

对于Markdown Extra,您可以使用自定义属性:

# Example text {style=text-align:center}

这适用于标题和块引用,但不适用于段落、内联元素和代码块。

更短的版本(但 HTML 5 不支持):

# Example text {align=center}

【讨论】:

  • @AlmostPitt 如前所述,它是 Markdown Extra 特有的功能,不太可能在其他地方工作。
【解决方案8】:

使用表格语法的合格“是”。例如,您可以将纯文本居中对齐,如下所示:

| |
| :-: |
| Excerpts from Romeo and Juliet (arr. V. Borisovsky) |

这会产生:

Excerpts from Romeo and Juliet (arr. V. Borisovsky)

请注意,您仍然可以在 HTML 块中使用 Markdown。例如:

<div style="font-style: italic; text-align: center;" markdown="1">

## Excerpts from Romeo and Juliet (arr. V. Borisovsky)
### Sergei Prokofiev
#### Timothy Ridout, viola ∙ Frank Dupree, piano

</div>

【讨论】:

    【解决方案9】:

    python markdown with attr_list extension 的语法略有不同:

    {: #someid .someclass somekey='some value' }
    

    例子:

    [Click here](http://exmaple.com){: .btn .btn-primary }
    
    Lead information paragraph
    {: .lead }
    

    【讨论】:

      【解决方案10】:

      我试图使图像居中,但此处答案中建议的技术均无效。带有内联 CSS 的常规 HTML &lt;img&gt; 对我有用...

      <img style="display: block; margin: auto;" alt="photo" src="{{ site.baseurl }}/images/image.jpg">
      

      这是一个托管在 GitHub 上的 Jekyll 博客

      【讨论】:

        【解决方案11】:

        对于大多数 Markdown 解析器,没有办法原生对齐文本。 一些解析器支持这种语法:-&gt; centered &lt;-

        但是,如果您的解析器不支持它,您可以使用 HTML,甚至允许您在标签内呈现 markdown。

        当使用任何元素(例如标题)时,您可以使用等效的 html 标记,例如

        # Title
        ## title 2
        

        等价于

        <h1> Title </h1>
        <h2> Title 2 </h2>
        

        例如,对于标题,您可以使用以下属性对齐文本:

        <!-- title only -->
        <h1 align="center"> Title </h1>
        
        <!-- title with div -->
        <div align="center"> <h1 align="center"> Title inside div! </h1> </div>
        

        但有时你不想使用 HTML,因为它破坏了在其中使用 markdown 的能力,在这些情况下,你可以使用 span,它允许你在 HTML 标签中呈现 markdown:

        <!-- title with span (you can render emojis or markdown inside it) -->
        <span align="center"> <h1> :star: ~~Centered~~ </h1> </span>
        
        

        请注意,此属性已被弃用,虽然它已被弃用,但它也是唯一适用于某些降价风格的属性,例如 Github 的降价

        【讨论】:

          【解决方案12】:

          我发现在 jupyter 笔记本单元格上使用乳胶语法非常有用,例如:

          ![good-boy](https://i.imgur.com/xtoLyW2.jpg  "Good boy on boat")
          
          $$\text{This is some centered text}$$
          

          【讨论】:

            【解决方案13】:

            要居中对齐,请使用箭头 (-&gt; &lt;-) 将要居中对齐的文本包围起来,如下所示:

            -> This is center aligned <-
            

            【讨论】:

            • 我正在一些在线 Markdown 中测试这个选项。你能添加一个 URL 或告诉我们这句话在 Markdown 中的作用吗?
            • 这适用于折扣 (pell.portland.or.us/~orc/Code/discount),它是原始降价的 C 实现。
            • 还有在RDiscountruby 实现中。谢谢!
            • 你必须添加这个插件才能让它工作:npmjs.com/package/markdown-it-center-text
            • 在 Notepad++ 中不起作用(python markdown + Live HTML 插件)
            猜你喜欢
            相关资源
            最近更新 更多
            热门标签