2023年如何在GitHub的README.md中正确居中图片？

以下是三种经过验证、非过时的实现方式，兼顾GitHub渲染效果与IDE语法合规性：

方案1：稳定兼容GitHub的经典写法 #

<p align="center">是GitHub长期支持的写法，虽不符合HTML5规范会被WebStorm等IDE标记，但渲染效果稳定。若介意IDE报错，可在IDE的HTML检查规则中忽略align属性的警告。代码示例：

<p align="center">
    <a href="https://www.yiiframework.com/" target="_blank">
        <img src="https://www.yiiframework.com/image/yii_logo_light.svg" width="400" alt="Yii Framework" />
    </a>
</p>

方案2：符合HTML规范的内联样式写法 #

使用<div>配合text-align: center内联样式，既满足现代HTML规范，也能被GitHub正确解析，同时不会触发IDE报错：

<div style="text-align: center;">
    <a href="https://www.yiiframework.com/" target="_blank">
        <img src="https://www.yiiframework.com/image/yii_logo_light.svg" width="400" alt="Yii Framework" />
    </a>
</div>

方案3：基于块级元素的精准居中 #

之前尝试margin: auto无效的原因是父元素<a>为行内元素，块级图片的居中规则不生效。只需将<a>设为块级元素并限制宽度即可：

<div style="width: 100%;">
    <a href="https://www.yiiframework.com/" target="_blank" style="display: block; margin: 0 auto; width: fit-content;">
        <img src="https://www.yiiframework.com/image/yii_logo_light.svg" width="400" alt="Yii Framework" />
    </a>
</div>

关键注意事项 #

• GitHub不支持<style>全局样式，所有样式必须使用内联方式
• 避免使用已废弃的<center>标签，尽管部分场景可用，但不符合现代Web规范

内容的提问来源于stack exchange，提问作者trejder