使用 Markdown,如何将图像及其标题居中?

发布于 2024-09-27 01:34:18 字数 213 浏览 6 评论 0原文

我想最终得到:

Hello there!

      <image>
      This is an image

Hi!

图像和文本 This is an image 位于页面中心的位置。我如何使用 Markdown 来实现这一点?

编辑:请注意,我希望将页面上的图像和文本水平居中。

I want to end up with:

Hello there!

      <image>
      This is an image

Hi!

Where the image and the text This is an image are centered on the page. How do I accomplish this with Markdown?

Edit: Note that I'm looking to horizontally center the image and text on the page.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

夜灵血窟げ 2024-10-04 01:34:18

我想我只需要使用 HTML 来水平对齐任何内容。

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

Hello there!

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

Hi!

I figured that I'd just have to use HTML where I want to horizontally align anything.

So my code would look like this:

Hello there!

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

Hi!
天气好吗我好吗 2024-10-04 01:34:18

我想我有一个简单的解决方案,只要您可以定义 CSS,就可以工作。它也不需要任何扩展或 HTML!首先是你的 Markdown 图像代码:

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

注意添加的 url hash #center。

现在在 CSS 中添加此规则:

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

您应该能够使用像这样的 url 哈希,就像定义类名一样。

要查看实际效果,请查看我的 JSFiddle 使用 SnarkDown 解析文本区域中的 MarkDown - https://jsfiddle.net /颤抖/6s30e8vr/

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:

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

Note the added url hash #center.

Now add this rule in 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.

To see this in action, check out my JSFiddle using SnarkDown to parse MarkDown in a textarea - https://jsfiddle.net/tremor/6s30e8vr/

三寸金莲 2024-10-04 01:34:18

如果您使用的是 kramdown,您可以执行此操作

Hello there!

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

Hi!

.center {
  text-align: center;
}

If you are using kramdown, you can do this

Hello there!

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

Hi!

.center {
  text-align: center;
}
寄意 2024-10-04 01:34:18

Mou(也许还有 Jekyll)中,这非常简单。

-> This is centered Text <-

因此,考虑到这一点,您可以将其应用于 img 语法。

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

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

In Mou (and perhaps Jekyll) this is quite simple.

-> This is centered Text <-

So taking that in mind you can apply this to the img syntax.

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

This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.

捎一片雪花 2024-10-04 01:34:18

您需要一个具有定义高度的块容器,行高值相同,并且图像具有垂直对齐:中间;
它应该有效。

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%;
}

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%;
}
盗心人 2024-10-04 01:34:18

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

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

I'm surprised no one mentioned this way:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!
很糊涂小朋友 2024-10-04 01:34:18

使用 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>

With kramdown (used by 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)

{:.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>
假扮的天使 2024-10-04 01:34:18

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

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!

Here is a simple solution that does not use any deprecated tags or attributes:

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!
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文