Markdown默认并不支持排版,排版需要借助HTML/CSS来实现

遇到这个问题时,网上搜索发现很多人都有相同需求,但看到的答案却大多不怎么满意,因此这里整理一下。说是Markdown中图片居中,但此处针对的是Markdown转化的网页图片居中,更具体的是针对Hexo写博客情况。

Markdown默认并不支持排版,排版需要借助HTML/CSS来实现,如果你不懂HTML/CSS,也不想去了解,那么最直接的方法是换一个Hexo主题,很多主题中图片默认都是居中的。

这里总结了常见的图片居中办法,如果想要更详细的了解代码的具体意义,可以查看网页排版以及文末的参考链接。

标签

实现图片居中,最简单的方法是使用HTML的center标签

...,网上可以看到不少这个答案。但注意该标签在HTML5中已移除,因此不建议使用。

inline样式

网上常见的第二种做法是使用内联样式:1

2

3

4

5

6

7

8

![Picture](/path/to/image)

![Picture](/path/to/image)

在VSCode中预览时确实有效,需要注意的是插入图片行与

起始标签间要有空行,否则图片无法正常显示。不过在使用Hexo的tranquilpeak主题时,上述做法居然无效,如果换用

标签,有效果但也不是居中。出现这种情况是由于Markdown与HTML混排的限制,具体可参考网页排版:Markdown混排,总之同样不推荐这种方法。

内部样式表

由于转换为网页时,Markdown插入图片的语句会对应于img元素,因此我们可以直接调整img元素样式。

在Markdown文档中插入以下HTML/CSS代码,便可使文章中所有插入的图片都居中:1

2

3

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

图片的其他属性如大小/宽度等都可以在此处统一调整,如width: 80%;。

当然也可以吧这几行规则保存到单独的CSS文件,作为外部样式表使用资源链接引入;又或者修改所用主题页面主体(body)部分的CSS设置,对整个站点的所有图片都生效。

img标签

上述方法会改变全文所有图片排版,如果只想调整个别图片,我们可以使用标签,直接用HTML代码插入图片:1

Hexo标签插件

最后,对于Hexo还可以使用img标签插件,该插件支持设置类名,从而控制图片排版:1{% img center /path/to/image %}

同时在文章中加入以下HTML/CSS代码,定义center类1

2

3

4

5

6

.center {

text-align: center;

margin: 0 auto;

}

markdown统一设置图片格式_Markdown中如何设置图片居中相关推荐

  1. android .9图片在代码中的设置,Android点九图总结以及在聊天气泡中的使用

    编辑推荐: 本文来自于腾讯云,介绍了点九图的本质,聊天气泡中使用点九图,其它问题等. 1. 点九图介绍 这一块是对点九图的简单介绍,如果对这块已经有了解的话,可以直接跳到2,看看聊天气泡中如何使用点九 ...

  2. word里图片格式为嵌入型时,图片显示不全问题

    word里图片格式为嵌入型时,图片显示不全问题 问题描述:在使用word插入图片时,当图片格式为嵌入型时,图片显示不全.如图: 解决方法: 双击选中图片,然后点击开始菜单的段落右下角 然后,将行距改为 ...

  3. markdown统一设置图片格式_Markdown教程

    Markdown是一种强大的文本书写语言,可以用经历少的步骤书写出非常工整的格式,无论是些用来写实验报告,写博客还是电子书都算得上是强力的工具,本文将粗略讲解Markdown的基本语法.其余用法读者可 ...

  4. android文本自动添加图片格式,Android中多行文本末尾添加图片排版问题的解决方法...

    前言 最近在项目中需要在某个多行英文文本末尾增加一个图片,尝试了很多方法,最后用了一个比较Tricky的方法解决了,当然这种方法不一定是最好最优的解决办法,记录一下. 问题 如果直接使用drawabl ...

  5. 设置图片格式为php,php实现图片格式转换

    php实现图片格式转换的方法:首先新建一个php文件,并在测试目录放两张图片:然后通过pathinfo函数来判断图片的格式:最后通过函数imagejpeg将图片源转换成jpg格式图片并保存即可. 推荐 ...

  6. 图片滚动html设置圆圈,在网页中添加滚动图片(文字和其它对象)的方法

    在网页中添加滚动图片(文字和其它对象)的方法 (2006-04-13 15:31:51) 分类: 记 滚动内容 Direction 参数可设置:up down left right (控制滚动方向) ...

  7. notepad设置背景颜色_Word2017中如何设置透明背景图和取消背景图

    如何在Word2017中设置透明背景图 1.打开Word文档 2.选择"插入"-"形状",选择并绘制你所需要的背景图形状 3.选中所绘的形状,点击右键,选择&q ...

  8. java怎么将加载图片消除_Java中加载图片的方法

    Java中添加图片,我知道有两种方法 用new ImageIcon("地址")函数,将图片放到JLabel中,然后把JLabel放到需要的地方就可以了 ImageIcon bg=n ...

  9. java word设置纸张a3,Word中进行设置A3文档纸张大小的操作技巧

    在工作中最常用的纸质文档是A4的,但是我们有时候也需要用一些A3甚至其他纸张的文档,那么,在做文档的时候该如何设置呢?今天,学习啦小编就教大家在Word中进行设置A3文档纸张大小的操作技巧. Word ...

最新文章

  1. python lstm_python-Keras中LSTM的补充
  2. select count(*) from temp 与select count(1) from temp有什么区别
  3. 公司--超级链接跳转和表单提交,删除的表单提交和删除失败的提示信息
  4. JavaScript-函数
  5. linux syslog日志
  6. C++类与对象(05)
  7. 【TinyML 实践 - 1:What Why TinyML】
  8. 性能测试--jmeter中的用户自定义变量【13】
  9. php unid,微信扫码登陆/微信公交号 登录PHP 自适应 UnionID统一用户
  10. matmul torch 详解_python基础教程详解torch.Tensor的4种乘法
  11. SecureCRT鼠标双击或拖成变成Ctrl+C的解决办法
  12. coverity java_coverity检测不到代码 | 学步园
  13. pr cpu100%_PR插件Neat Video5.0.2安装教程
  14. C -CPT-SS-PDI 喜树碱-双硫键-聚苝酰亚胺/PEI-g–PLO 聚乙烯亚胺-聚L-鸟氨酸
  15. python实现logistic增长模型拟合2019-nCov确诊人数2月1日更新
  16. Scratch——创建exe可执行文件
  17. 隆中对,程序员修炼之道,技术学习前进之路
  18. OUC_软件工程_BLOG1
  19. S32K-LPSPI中文手册
  20. 《2021企业数智化转型升级先锋人物》榜重磅发布

热门文章

  1. checkbox常用操作
  2. 【机器学习快讯】20150128机器学习快讯
  3. Android程序中完美解决Zxing二维码扫描图片变形问题
  4. P3380 【模板】二逼平衡树(树套树)
  5. 鸿蒙系统会不会吸收linux,鸿蒙系统是不是别人不给它适配?
  6. C++ 按行读取数据文件,每行以tab分隔
  7. iframe的使用和替代iframe的标签
  8. proteus教程——操作内存并行扩展8255
  9. 4110:圣诞老人的礼物-Santa Clau’s Gifts
  10. 《红楼梦》的读后感范文2300字