在两层父div中水平居中对齐社交图标div的问题求助

我正在为作品集网站排列三个包含带链接图片的社交图标div标签，目前已实现图标并排，但只能让它们在容器div中均匀分布，想要将它们居中对齐。附上相关代码提供上下文：

<!DOCTYPE html>
<html lang="en">
<style>
html {
    background-color: black;
    padding: 0%;
}
body {
    margin: 0%;
}
#leftWrapper {
    color: white;
    width: 30%;
    height: 100%;
    position: absolute;
    margin: 0%;
    padding: 0%;
    text-align: center;
    font-family: 'Trebuchet MS';
}
#leftVertWrapper {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#socialIconBigWrapper {
    display: flex;
}
.socialIconWrapper {
    flex: 20%;
    padding: 5px;
    box-align: 'justify-self';
}
.socialIcon {
    width: 30%;
}
</style>
<body>
<div id="leftWrapper">
    <div id="leftVertWrapper">
        <div id="socialIconBigWrapper">
            <div class="socialIconWrapper" style="float: left;">
                <a style="text-decoration: none;" href="">
                    <img class="socialIcon" src="linkedinIcon.png">
                </a>
            </div>
            <div class="socialIconWrapper" style="float: left;">
                <a style="text-decoration: none;" href="">
                    <img class="socialIcon" src="twitterIcon.png">
                </a>
            </div>
            <div class="socialIconWrapper" style="float: left;">
                <a style="text-decoration: none;" href="">
                    <img class="socialIcon" src="githubIcon.png">
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

我尝试过使用table、调整padding和margin，以及float: left;和display: inline-block。使用table时，图片会自动添加两侧空白来扩大宽度以居中，无法通过边距或内边距调整；使用float仅将图标移到div一侧，无法并排；display: inline-block则无任何效果。

解决方案 #

你的代码已经用到了flex布局，只需要调整几个关键属性就能实现居中：

1. 给flex容器#socialIconBigWrapper添加justify-content: center;，这是让子元素水平居中的核心属性
2. 移除.socialIconWrapper的flex:20%;，这个属性会强制每个子元素分配容器宽度，导致均匀分布
3. 删掉每个.socialIconWrapper内的float: left;，flex布局下float属性完全无效，反而会干扰布局
4. 可选：给.socialIconWrapper添加margin: 0 10px;，让图标之间保留合适间距

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<style>
html {
    background-color: black;
    padding: 0%;
}
body {
    margin: 0%;
}
#leftWrapper {
    color: white;
    width: 30%;
    height: 100%;
    position: absolute;
    margin: 0%;
    padding: 0%;
    text-align: center;
    font-family: 'Trebuchet MS';
}
#leftVertWrapper {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#socialIconBigWrapper {
    display: flex;
    justify-content: center; /* 添加这行实现水平居中 */
}
.socialIconWrapper {
    padding: 5px;
    margin: 0 10px; /* 可选：增加图标间距 */
}
.socialIcon {
    width: 30%;
}
</style>
<body>
<div id="leftWrapper">
    <div id="leftVertWrapper">
        <div id="socialIconBigWrapper">
            <div class="socialIconWrapper">
                <a style="text-decoration: none;" href="">
                    <img class="socialIcon" src="linkedinIcon.png">
                </a>
            </div>
            <div class="socialIconWrapper">
                <a style="text-decoration: none;" href="">
                    <img class="socialIcon" src="twitterIcon.png">
                </a>
            </div>
            <div class="socialIconWrapper">
                <a style="text-decoration: none;" href="">
                    <img class="socialIcon" src="githubIcon.png">
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

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