在网页/博客中实现图片居中和添加题注

有些时候，我们想要在网页/博客中实现图片的居中，并且添加题注，实现方式如下：

网页

代码可以复制粘贴：

<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="输入图片地址" width="输入一个百分数以确定图片大小比例">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">输入题注</div>
</center>

效果：

网页中的图片

---

博客

经过测试，博客支持HTML4，不支持HTML5和CSS，所以style属性无法生效，想要找到替换方案。请参考：HTML < img> 标签，HTML < font>标签

<!--删除了style属性，变得简洁-->
<center>
    <img src="输入图片地址" width="输入一个百分数以确定图片大小比例">
    <br>
    <font size="输入数字（推荐2或3）" face="输入字体名称，可选值：宋体/黑体/微软雅黑/楷体/隶书..." color="#999"><u>输入题注</u></font>
</center>

演示：

奥斯卡影帝

---

为了自己使用方便，我把中文删掉提取出自己的模板：

<center>
    <img src="" width="%">
    <br>
    <font size="3" face="楷体" color="#999"><u></u></font>
</center>

---

WordPress博客

<center>
	<a data-fancybox="images" href="" class="fancybox" data-fancybox-group="button"><img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);"src="" width="%"></a>
    <br>
    <div style="border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;"></div>
</center>