Используя Markdown, как я могу сосредоточить изображение и его подпись?

Я хочу в итоге:

Hello there!

      <image>
      This is an image

Hi!

Если изображение и текст This is an image центрированы на странице. Как это сделать с Markdown?

Изменить: обратите внимание, что я хочу горизонтально центрировать изображение и текст на странице.

Ответ 1

Вам нужен контейнер блока с определенной высотой, то же значение для линии-высоты и изображения с вертикальным выравниванием: среднее; Он должен работать.

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

Я решил, что мне просто нужно будет использовать HTML, где я хочу горизонтально выровнять что-либо.

Итак, мой код будет выглядеть так:

Hello there!

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

Hi!

Ответ 3

Если вы используете kramdown, вы можете сделать это

Hello there!

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

Hi!

.center {
  text-align: center;
}

Ответ 4

Я думаю, у меня есть простое решение, которое будет работать, учитывая, что вы можете определить CSS. Также не требуется никаких расширений или HTML! Сначала код вашего уцененного изображения:

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

Обратите внимание на добавленный URL-хэш #center.

Теперь добавьте это правило в CSS:

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

Вы должны иметь возможность использовать URL-хэш, как это, почти как определение имени класса.

Чтобы увидеть это в действии, проверьте мой JSFiddle, используя SnarkDown для анализа MarkDown в текстовой области - https://jsfiddle.net/tremor/6s30e8vr/

Ответ 5

В Mou (и, возможно, Jekyll) это довольно просто.

-> This is centered Text <-

Поэтому, учитывая это, вы можете применить это к синтаксису img.

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

Этот синтаксис не работает для реализаций Markdown, которые реализуют только то, что описано в Daring Fireball.

Ответ 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.

Или используя ответ от @(Стивен Пенни)

{:.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>

Ответ 7

Я удивлен, что никто не упомянул так:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!