Html 使用 Markdown，如何将图像及其标题居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3912694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Markdown, how do I center an image and its caption?
提问by Chetan
I want to end up with:
我想结束：
Hello there!
<image>
This is an image
Hi!
Where the image and the text This is an imageare centered on the page. How do I accomplish this with Markdown?
图像和文本This is an image在页面中央的位置。我如何使用 Markdown 完成此操作？
Edit: Note that I'm looking to horizontally center the image and text on the page.
编辑：请注意，我希望将页面上的图像和文本水平居中。
采纳答案by MatTheCat
You need a block container with a defined height, same value for line-height and image with vertical-align:middle; It should work.
您需要一个具有定义高度的块容器，行高和图像的值相同，垂直对齐：中间；它应该工作。
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%;
}
回答by Chetan
I figured that I'd just have to use HTML where I want to horizontally align anything.
我想我只需要在我想要水平对齐任何东西的地方使用 HTML。
So my code would look like this:
所以我的代码看起来像这样：
Hello there!
<center><img src="" ...></center>
<center>This is an image</center>
Hi!
回答by tremor
I think I have a simple solution that will work given that you can define CSS. It also does not require any extensions or HTML! First your markdown image code:
我想我有一个简单的解决方案，因为您可以定义 CSS。它也不需要任何扩展或 HTML！首先你的降价图像代码：
Note the added url hash #center.
请注意添加的 url 哈希 #center。
Now add this rule in CSS:
现在在 CSS 中添加此规则：
img[src*='#center'] {
display: block;
margin: auto;
}
You should be able to use a url hash like this, almost like defining a class name.
您应该能够像这样使用 url 哈希，就像定义类名一样。
To see this in action, check out my JSFiddle using SnarkDown to parse MarkDown in a textarea - https://jsfiddle.net/tremor/6s30e8vr/
要查看此操作，请查看我的 JSFiddle 使用 SnarkDown 解析文本区域中的 MarkDown - https://jsfiddle.net/tremor/6s30e8vr/
回答by Steven Penny
回答by vdclouis
In Mou(and perhaps Jekyll) this is quite simple.
在Mou（也许还有 Jekyll）中，这很简单。
-> This is centered Text <-
So taking that in mind you can apply this to the img syntax.
因此，考虑到这一点，您可以将其应用于 img 语法。
-><-
This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.
此语法不适用于仅实现Daring Fireball上记录的内容的 Markdown 实现。
回答by raisercostin
With kramdown (used by githubpages)
使用 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.
Or using the response from @(Steven Penny)
或者使用@(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>
回答by Aliaksandr Sushkevich
I'm surprised no one mentioned this way:
我很惊讶没有人以这种方式提及：
Hello there!
<p align="center">
<img src="">
This is an image
</p>
Hi!
