使用css让markdown生成的网页里图片居中

近日需要在个人网站上添加图片，位置需要居中。markdown语言没有原生的解决方法。How to Align Images in Markdown中给出了一种解决方法：

<div style="text-align:center" markdown="1">
![Alt Text](/path/to/image "Caption")
</div>

不过我觉得这种方法不够优雅，没有采用。

Using Markdown, how do I center an image and its caption?里讨论了这个问题。由于我自己使用的解释器是kramdown，因此采纳了Steven Penny的如下的解决方案。

在当前撰写的markdown文件里，紧挨着在想要居中的元素之前添加{:.center}：

Hello there!

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

Hi!

在css文件中（我这里的文件是assets/themes/twitter/css/style.css），需要添加center的定义：

.center {
  text-align: center;
  margin: 0 auto;
}

这样就搞定啦！

-- EOF --

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 使用css让markdown生成的网页里图片居中