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

使用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生成的网页里图片居中

comments powered by Disqus