Jak wyśrodkować obraz i jego podpis za pomocą Markdown?

Chcę skończyć z: 

Hello there!

      <image>
      This is an image

Hi!

Gdzie obrazek i tekst This is an image są wyśrodkowane na stronie. Jak to osiągnąć z Markdown?

Edit: zwróć uwagę, że chcę poziomo wyśrodkować obraz i tekst na stronie.

Author: Chetan, 2010-10-12
Source

6 answers

Potrzebny jest kontener blokowy o określonej wysokości, takiej samej wartości dla linii-height i obrazu z vertical-align: middle; Powinno zadziałać.

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%;
}
 7
Author: MatTheCat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-12 09:35:56

Pomyślałem, że będę musiał użyć HTML, gdzie chcę wszystko wyrównać poziomo.

Więc mój kod wyglądałby tak: 

Hello there!

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

Hi!
 30
Author: Chetan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-17 21:10:44

Jeśli używasz kramdown, możesz to zrobić 

Hello there!

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

Hi!

.center {
  text-align: center;
}
 20
Author: Steven Penny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-31 15:03:46

W Mou (i być może Jekyll) jest to dość proste.

-> This is centered Text <-

Więc mając to na uwadze, możesz zastosować to do składni img.

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

Ta składnia nie działa dla implementacji Markdown, które implementują tylko to, co jest udokumentowane na Daring Fireball .

 18
Author: vdclouis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-14 15:59:05

Myślę, że mam proste rozwiązanie, które będzie działać, biorąc pod uwagę, że można zdefiniować CSS. Nie wymaga również żadnych rozszerzeń ani HTML! Najpierw kod obrazka markdown: 

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

Zwróć uwagę na dodany url hash #center.

Teraz dodaj tę regułę w CSS: 

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

Powinieneś być w stanie używać skrótu url takiego jak ten, prawie jak definiowanie nazwy klasy.

Aby zobaczyć to w akcji, sprawdź mój JSFiddle używając SnarkDown do analizy MarkDown w obszarze tekstowym - https://jsfiddle.net/8q41zbfj/

 9
Author: tremor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-17 19:15:16

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.

Lub używając odpowiedzi z @(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>
 4
Author: raisercostin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-08 15:34:29