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

最新推荐文章于 2025-03-23 20:32:34 发布

置顶 DanmoSAMA

最新推荐文章于 2025-03-23 20:32:34 发布

阅读量1.5k

点赞数 1

分类专栏：其他

本文链接：https://blog.csdn.net/m0_51235736/article/details/113593262

版权

其他专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在网页及博客中实现图片居中显示并添加题注的方法，包括适用于不同平台的HTML代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

网页

代码可以复制粘贴：

<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>