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

Question

Я хочу закончить с:

Hello there!

      <image>
      This is an image

Hi!

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

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

Answer 1

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

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

Hello there!

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

Hi!

Answer 2

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

Hello there!

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

Hi!

.center {
  text-align: center;
}

Answer 3

В Моу (и, возможно, Джекилл) это довольно просто.

-> This is centered Text <-

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

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

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

Answer 4

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

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

Обратите внимание на добавленный url hash # center.

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

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

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

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

Answer 5

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

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

Answer 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>