Question

我想最终：

Hello there!

      <image>
      This is an image

Hi!

图片和文字This is an image在页面上居中的位置。如何使用Markdown实现这一目标？

编辑：请注意，我希望在页面上水平居中图像和文字。

Answer 1

我认为我只需要在我想要水平对齐任何内容的地方使用HTML。

所以我的代码看起来像这样：

Hello there!

      <center><img src="" ...></center>
      <center>This is an image</center>

Hi!

Answer 2

如果您使用kramdown，则可以执行此操作

Hello there!

{:.center}
![cardinal](/img/2012/cardinal.jpg)  
This is an image

Hi!

.center {
  text-align: center;
}

Answer 3

在Mou（也许是杰基尔），这很简单。

-> This is centered Text <-

因此，请记住，您可以将其应用于img语法。

->![alt text](/link/to/img)<-

此语法不适用于仅实现Daring Fireball中记录的内容的Markdown实现。

Answer 4

我认为我有一个简单的解决方案，因为你可以定义CSS。它也不需要任何扩展或HTML！首先是降价图像代码：

![my image](/img/myImage.jpg#center)

注意添加的url hash #center。

现在在CSS中添加此规则：

img[src*='#center'] { 
    display: block;
    margin: auto;
}

你应该能够像这样使用url哈希，就像定义类名一样。

要查看此操作，请使用SnarkDown检查我的JSFiddle以解析textarea中的MarkDown - https://jsfiddle.net/tremor/6s30e8vr/

Answer 5

你需要一个具有定义高度的块容器，行高相同的值和垂直对齐的图像：middle; 它应该工作。

Hello there !

<div id="container">
    <img />
    This is an image
</div>

Hi !

#container {
    height:100px;
    line-height:100px;
}

#container img {
    vertical-align:middle;
    max-height:100%;
}

Answer 6

使用kramdown（由githubpages使用）

{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.

或使用@（Steven Penny）的回复

{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.

<style>
.mycenter {
    text-align:center;
}
</style>

Answer 7

这是一个简单的解决方案，它不使用任何已弃用的标签或属性：

Hello there!

<img style="display: block; margin: auto;"
src="https://stackoverflow.design/assets/img/logos/so/logo-print.svg">

<p style="text-align: center;">
This is an image
</p>

Hi!

Answer 8

我很惊讶没有人这样提到：

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

使用Markdown，如何将图像及其标题居中？

8 个答案: