Hexo-theme-next: 如何设置图片居中

[iissnan]

你期望的写法是?

[change2hao]

就像这个链接里描述的那样吧 http://trefoil.github.io/2013/10/23/cssmarkdown.html

[iissnan]

貌似链接中的那个方案需要安装其他的 Markdown 解析器。

NexT 中也内置了一些类似 .center 这样 css 类：

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }
.text-nowrap  { white-space: nowrap; }

在假设 Hexo 支持链接中所提到的 Markdown 解析器的前提下，使用方法就是：

Hello there!

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

Hi!

[change2hao]

我不是做前端的，不太明白，那有没有最简单的方法，谢谢！

[iissnan]

有几种方法，但是都需要写 HTML tag。

我目前在用的是：

![](/path/to/image)

<p class="text-center">Image Caption</p>

或许可以考虑使用 <figure> （需要增加一条 figure 子元素居中的 css，目前还没有）。例如：

<figure> ![](/path/to/image) Caption</figure>

[iqiancheng]

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

[BUPTLdy]

@iqiancheng 请问这个加在哪里

[zipeijun]

最简单的就是用HTML代码了吧，在编写MarkDown的时候使用如下代码
<img style="margin: auto;" src="URL">
把URL替换成你的图片地址即可。

[Freyr-Wings]

themes\next\source\css_schemes\Mist_posts-expanded.styl
下修改
.post-body img { margin: auto; }
重新渲染 然后等一会就好了