在编写 Markdown 文档时,插入图片默认靠左,有时候居中可能更合适阅读。
图片居中/居左/居右
CSS 方式
参考 https://jsfiddle.net/tremor/6s30e8vr/
.md
文件中:

.css
文件中:
/** IMAGE CENTERING CSS **/ /** 居中 **/ img[src*='#center'] { display: block; margin: auto; }
此方法好处在于只有指定的图片居中,不需要居中的图片继续默认居左。下面的方式将所有图片居中:
img{ positon:relative; width:80%; left:10%; /*left为(img父元素元素的width - img元素自己的width)÷2*/ }
支持原生HTML标记情况
图片居中:
<div align="center"> <img src="http://path/to/sample.png" height="300" width="300" > <img src="http://path/to/sample.png" height="300" width="300" > <img src="http://path/to/sample.png" height="300" width="300" > </div>
图片居左:
<div align="left"> <img src="http://path/to/sample.png" height="300" width="300" > </div>
图片居右:
<div align="right"> <img src="http://path/to/sample.png" height="300" width="300" > </div>
图片大小
<img src="http://path/to/sample.png" width="100px" height="100px" alt="图片名称"> <img src="http://path/to/sample.png" width="30%" height="30%" alt="图片名称">
图片自适应屏幕
/** 所有图片 **/ img{ max-width: 100%; height: auto; } /** 文章主体内容区域内(<div id="post_body">文章主体内容</div>),自适应屏幕 **/ #post_body img{ max-width: 100%; height: auto; }