logo标签列表

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

htmlcssmarkdowncenter
52

我希望最终得到的结果是:

Hello there!

      <image>
      This is an image

Hi!

如何使用Markdown实现图像和文本This is an image在页面上居中显示？

编辑：注意，我想要水平居中图像和文字。

请看这里。 - Dorian Grv
8个回答
59

我发现我只需要在想要水平对齐的地方使用HTML。

因此，我的代码看起来像这样：

Hello there!

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

Hi!
25
自1998年起，HTML4中的<center>元素已被废弃。只需使用CSS将其或其包装器设置为具有固定宽度和margin:0 auto;的块级元素即可。 - BalusC
25
“Deprecated”并不意味着不能使用。Chetan提供了一个有效的建议。我认为他不应该因这条评论而被评为-12分。 - Matthieu Cormier
12
当然不应该使用，这就是为什么存在“已弃用(deprecated)”一词。一行CSS是正确的方法，如果您不想要样式表，则可以使用内联方式。没有任何理由继续使用<center>。 - Med
10
我认为不应该废弃简单的解决方案来取而代之更加复杂的解决方案，两者应该并存。唉。 - Mars
13
是的，<center> 标签已经被弃用多年了。但是，您可以确信在2525年，浏览器仍然会充分支持它。 - Marc Rochkind
显示剩余7条评论
45

我认为我有一个简单的解决方案，只要你能定义CSS，它就能运行。它也不需要任何扩展或HTML！首先你的Markdown图像代码：

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

请注意新增的url哈希值#center。

现在在CSS中添加以下规则：

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

你应该能够像定义类名一样使用网址哈希。

要看到这个效果，请查看我的JSFiddle，在文本区中使用SnarkDown解析MarkDown - https://jsfiddle.net/tremor/6s30e8vr/

成功了！但是你能解释一下为什么CSS部分起作用吗？它只是设置为块和自动边距。没有居中样式。怎么才能让它居中呢？ - Robbi Nespu
在CSS中，当使用margin: auto时，元素将相对于其容器居中。 - tremor
真可惜我没早点发现这个！ - fromage9747
22
如果您正在使用kramdown，您可以这样做。
Hello there!

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

Hi!

.center {
  text-align: center;
}
18
在Mou（也许是Jekyll）中，这很简单。
-> This is centered Text <-

所以，考虑到这一点，您可以将此应用于img语法。
->![alt text](/link/to/img)<-

这个语法在仅实现Daring Fireball文档中所述功能的Markdown实现中无效。
11

你需要一个定义了高度的块级容器，行高与图像垂直居中: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%;
}
2
我可以在div标签内使用Markdown语法吗？ - Chetan
5
我认为Markdown并不用于定位。 - MatTheCat
哦，我正在寻找水平居中。 - Chetan
1
@Chetan 我不认为你可以这样做。一旦你通过打开标签进入HTML模式，只有HTML代码会被解析，直到你关闭该标签，然后解析器才会回到markdown模式。 - Jason
注意：这种方法同样适用于水平居中。 - Chetan
这个是应该直接放在 .md 文件里面吗？看起来 CSS 部分好像被当作文本理解了。 - Crystina
11

我很惊讶没有人提到这种方法：

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!
3
可以确认，这个方法适用于GitHub的README文件。感谢你的回答。 - Benjamin Luo
7
使用 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>
这个。这就是我不知为何痛苦地花了一个小时搜索的答案。（第一个）感谢 @raisercostin。如果我能给你点赞三次，我一定会的。 - Nick Schwaderer
2
这就是答案，现在我知道为什么珠宝会沉到海底了 :wink: - Ahsan S. Sher
2
这里有一个简单的解决方案，不使用任何已弃用的标签或属性：
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!
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接