为什么我不能用 p 标签居中 Markdown 图像语法但 div 有效？

Question

我有一个 GitHub 风格的 .md 文件，我一直在尝试使用 p 标签将几个图像居中。它不起作用，但是当我将它切换到div 时，它按预期工作。 Here's 它的样子。

<p align="center">
  
  ![Python](https://img.shields.io/badge/Python-fff?logo=python)
  ![Ruby](https://img.shields.io/badge/Ruby-fff?logo=ruby)
  
</p>

<div align="center">
  
  ![Python](https://img.shields.io/badge/Python-fff?logo=python)
  ![Ruby](https://img.shields.io/badge/Ruby-fff?logo=ruby)
  
</div>

如果我不将 Markdown 与 HTML 混合并以这种方式进行，它就可以工作。 Here's 它的样子。

<p align="center">
  <a href="https://google.com">
    <img src="https://img.shields.io/badge/Python-fff?logo=python" alt="Python" />
  </a>
  <a href="https://google.com">
    <img src="https://img.shields.io/badge/Ruby-fff?logo=ruby" alt="Ruby" />
  </a>
</p>

我看到这两种方式的唯一区别是第一个代码块没有将图像嵌入到p 标记中，而是它的兄弟。有没有办法获得第一种使用p 标签的方法，还是不可能？

Answer 1

代码中的空行已经插入<p>标签，由于<p>不能嵌套，这意味着隐式<p>（没有对齐）将强制关闭前一个<p> 已对齐，即第一个 sn-p 将在 DOM 中以这样的方式结束：

<p align="center"></p>
<p>
  <a href="..."><img src="..." /></a>
  <a href="..."><img src="..." /></a>
</p>

...正如您在 DevTools 中查看 GitHub 上的输出时所见：

那是因为这个……

A

B

...将呈现为：

<p>
  A
</p>
<p>
  B
</p>

但是，仅仅删除空行也不起作用，因为这样该块就被标识为具有不会被解析的即时内容的 HTML 标记。如果您随后手动使用 <img> 标签而不是依赖 Markdown 语法来处理内容（正如您已经注意到的），它确实有效。

<div> 可以正常工作，因为<p> 可以在<div> 内，并且<div> 的对齐方式仍然有效：