Sử dụng Markdown, làm cách nào để căn giữa một hình ảnh và chú thích của nó?

Question

Tôi muốn kết thúc với:

Hello there! 

     <image> 
     This is an image 

Hi! 

Trong trường hợp hình ảnh và văn bản This is an image được tập trung trên trang. Làm thế nào để tôi thực hiện điều này với Markdown?

Chỉnh sửa: Lưu ý rằng tôi đang tìm cách căn giữa hình ảnh và văn bản theo chiều ngang trên trang.

Answer 1

Bạn cần một hộp chứa có chiều cao được xác định, cùng một giá trị cho chiều cao dòng và hình ảnh với căn chỉnh dọc: giữa; Nó sẽ hoạt động.

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

Tôi nhận thấy mình chỉ cần sử dụng HTML nơi tôi muốn căn chỉnh theo chiều ngang bất kỳ thứ gì.

Vì vậy, mã của tôi sẽ trông như thế này:

Hello there! 

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

Hi! 

Answer 3

Nếu bạn đang sử dụng kramdown, bạn có thể làm điều này

Hello there! 

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

Hi! 

.center { 
    text-align: center; 
} 

Answer 4

Trong Mou (và có lẽ Jekyll) này khá đơn giản.

-> This is centered Text <- 

Vì vậy, hãy nhớ rằng bạn có thể áp dụng điều này cho cú pháp img.

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

Cú pháp này không hoạt động đối với triển khai Markdown chỉ thực hiện những gì được ghi trên Daring Fireball.

Answer 5

Với kramdown (được sử dụng bởi 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. 

Hoặc sử dụng phản hồi từ @ (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

Tôi nghĩ rằng tôi có một giải pháp mà nên làm việc cho rằng bạn có thể định nghĩa CSS và không yêu cầu bất kỳ tiện ích mở rộng nào. Đầu tiên mã hình ảnh markdown của bạn:

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

Lưu ý thêm url #center.

Bây giờ thêm quy tắc này trong CSS

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

Bạn sẽ có thể sử dụng một băm url như thế này gần giống như việc xác định một tên lớp.