Używając Markdown, jak wyśrodkować obraz i jego podpis?

Question

Chcę skończyć z:

Hello there! 

     <image> 
     This is an image 

Hi! 

gdzie obraz i tekst This is an image skupiają się na stronie. Jak mam to zrobić z Markdown?

Edytuj: Zauważ, że szukam poziomego wyśrodkowania obrazu i tekstu na stronie.

Answer 1

Potrzebujesz pojemnika blokowego o zdefiniowanej wysokości, tej samej wartości dla wysokości linii i obrazu z wyrównaniem pionowym: środkowym; To powinno dział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%; 
} 

Answer 2

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

Więc mój kod będzie wyglądać następująco:

Hello there! 

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

Hi! 

Answer 3

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

Hello there! 

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

Hi! 

.center { 
    text-align: center; 
} 

Answer 4

W Mou (a może Jekyll) jest to całkiem proste.

-> This is centered Text <- 

Biorąc to pod uwagę, można zastosować to do składni img.

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

składnia ta nie działa w przypadku wdrożeń Przecena które implementują tylko to, co jest udokumentowane na Daring Fireball.

Answer 5

Z kramdown (używany przez 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 za pomocą reakcji ze @ (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> 

Answer 6

Chyba mam rozwiązanie, który powinien działać przy założeniu, że można zdefiniować CSS i nie wymaga żadnych rozszerzeń. Najpierw swój kod obrazowania:

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

Uwaga na hash #center z dodanym adresem.

Teraz dodaj tę regułę CSS

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

Powinieneś być w stanie użyć hash url tak prawie jak zdefiniowanie nazwy klasy.