如何居中通过Image Sprites添加的社交媒体背景图标？

核心问题分析 #

你设置的通用background-position: center center被每个图标类的具体background-position（如0 0）覆盖，导致图标无法居中；同时默认盒模型（content-box）让边框额外占据空间，进一步干扰了定位精度。

调整步骤 #

1. 统一盒模型：给图标链接添加box-sizing: border-box，让width和height包含边框，确保尺寸计算一致。
2. 基于中心定位雪碧图：使用calc()结合百分比和像素值，让每个雪碧图块的中心与容器中心对齐，替代原有的左上角定位方式。

修改后的代码 #

CSS部分 #

.social-media-icon{
    display: inline-block;
}

.social-media-icon a{
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    border: 2px solid #c3d4e2;  
    position: relative;
    /* 统一盒模型，width/height包含边框 */
    box-sizing: border-box;
    height: 36px;
    width: 36px;
    background: url(/img/social-icons.png);
    background-repeat: no-repeat;
    /* 基础居中定位，后续类会基于此调整 */
    background-position: center center;
}

.social-media-icon a:hover{
    background-color: #c3d4e2;
}

/* 每个图标基于中心偏移定位，确保图标居中 */
.fb-icon a{
    /* 雪碧图中fb块中心在(18px,18px)，容器中心减去该坐标 */
    background-position: calc(50% - 18px) calc(50% - 18px); 
}
.fb-icon a:hover{
    background-position: calc(50% - 18px) calc(50% - 18px - 36px);
}

.x-icon a{
    /* 雪碧图中x块中心在(54px,18px) */
    background-position: calc(50% - 54px) calc(50% - 18px); 
}
.x-icon a:hover{
    background-position: calc(50% - 54px) calc(50% - 18px - 36px);
}

.youtube-icon a{
    /* 雪碧图中youtube块中心在(90px,18px) */
    background-position: calc(50% - 90px) calc(50% - 18px); 
}
.youtube-icon a:hover{
    background-position: calc(50% - 90px) calc(50% - 18px - 36px);
}

.insta-icon a{
    /* 雪碧图中insta块中心在(126px,18px) */
    background-position: calc(50% - 126px) calc(50% - 18px); 
}
.insta-icon a:hover{
    background-position: calc(50% - 126px) calc(50% - 18px - 36px);
}

HTML部分（无需修改） #

<div class="social-media">
<div class="fb-icon social-media-icon icon">
    <a href="">
        <span class="social-text">fb</span>
    </a>
</div>
<div class="x-icon social-media-icon icon">
    <a href="">
        <span class="social-text">x</span> 
    </a>
</div>
<div class="youtube-icon social-media-icon icon">
    <a href="">
        <span class="social-text">youtube</span>
    </a>
</div>
<div class="insta-icon social-media-icon icon">   
    <a href="">
        <span class="social-text">intergram</span>
     </a>
</div>
</div>

原理说明 #

• box-sizing: border-box确保36px的宽高包含边框，容器内部的可显示区域尺寸统一。
• calc(50% - Xpx)计算出容器中心到雪碧图块中心的偏移量，让每个图标块的中心与容器中心精准对齐，彻底解决图标偏移问题。

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