前言

Typecho是一个基于PHP的简洁的开源博客程序, 原生支持Markdown语法. 遗憾的是, Markdown本身并没有排版功能, 在编写文章时, 插入图片默认是靠左对齐的, 而有时候把文章中的图片设置成居中会让版面看起来更加美观舒适.

本文将介绍如何使用HTML标签来实现图片居中.

Markdown 插入图片语法

首先来回顾一下Markdown插入图片的两种形式:

行内式

![Alt text](图片URL "Optional title")

参考式

![Alt text][id]
[id]: 图片URL  "Optional title"

其中id是图片参考的名称.

设置图片居中

使用HTML中的<center>、<div>、<p>或<img>标签让图片居中.

<center> 标签

!> HTML5 已不支持 center 标签, 故并不建议使用该方法.

<center>
![](https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg)
</center>

实例

<center>
</center>

<div> 标签

!> 有的解析器需要在图片语法与首个 div 标签之间有一行回车才能解析, 这里为了方便直接加上.

<div align="center">

![](https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg)
</div>

<img> 标签

<img style="display: block; margin: 0 auto;" src="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>

实例

<p>和<img>标签

<p style="text-align:center">
<img src="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</p>

实例

<p style="text-align:center">

</p>

<center>和<img>标签

<center>
<img src ="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</center>

实例

<center>

</center>

<div>和<img>标签

<div align=center>
<img src ="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</div>

实例

<div align=center>

</div>

设置无效解决方法

由于Typecho1.1自带的Markdown解析器功能比较辣鸡, 上述方法除了<img>标签, 其他的标签均不能正常显示, 可以通过以下几种方法解决:

开启特权模式

!> 特权模式只对上述后三种方法有效

开启特权模式的方法非常简单, 只需要用!!!将HTML代码包裹起来就行了.

!!!
<p style="text-align:center">
<img src="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</p>
!!!

更换解析器

MarkeDownParser

支持

• <img>标签
• <p>和<img>标签
• <center>和<img>标签
• <div>和<img>标签

下载此插件

MarkdownParse

支持

• <div>标签
• <img>标签
• <p>和<img>标签
• <center>和<img>标签
• <div>和<img>标签

下载此插件

Editor.md for Typecho

支持

• <center>标签
• <div>标签
• <img>标签
• <p>和<img>标签
• <center>和<img>标签
• <div>和<img>标签

下载此插件

总结

1. Typecho设置图片居中推荐使用<img>标签方法, 简单、方便、快捷.
2. 如果使用的是Typecho原生MD解析器, 并且要使用后三种方法, 注意用!!!包裹代码开启特权模式.
3. 一定要更换原生解析器的话, 推荐使用MarkdownParse插件.