使用 Markdown，如何使圖像及其標題居中？

問題描述

我想要結束：

Hello there!

      <image>
      This is an image

Hi!

圖像和文本 This is an image 位於頁面中心的位置。使用 Markdown 如何實現？

編輯：請注意，我正在尋找在頁面上的圖像和文本水平居中。

最佳解決思路

您需要一個具有定義的高度的塊容器，line-height 的值和 vertical-align 的圖像相同：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%;
}

次佳解決思路

我想我只需要使用 HTML，我想水平對齊任何東西。

所以我的代碼看起來像這樣：

Hello there!

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

Hi!

第三種解決思路

如果您使用 kramdown，您可以這樣做

Hello there!

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

Hi!

.center {
  text-align: center;
}

第四種思路

在 Mou(也許 Jekyll) 這很簡單。

-> This is centered Text <-

所以考慮到這一點，您可以將其應用於 img 語法。

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

對於僅實現 Daring Fireball 記錄的標記的 Markdown 實現，此語法不起作用。

第五種思路

我認為我有一個解決方案應該工作，因為您可以定義 CSS，並且不需要任何擴展。首先你的降價圖像代碼：

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

注意添加的 url 哈希 #center 。

現在在 CSS 中添加這個規則

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

你應該能夠像這樣使用一個類似於定義一個類名的 url 哈希。

參考文獻

• Using Markdown, how do I center an image and its caption?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。