我正在尝试排列三个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>我试过使用表格，也试过使用float: left;和display: inline-block来调整填充和边距。当使用表格时，图像大小会自动居中，方法是在图像两侧添加空白区域，使图像变宽。这就实现了图中所示的第一个效果。并且没有填充或边距的改变可以修复它。使用float只是将所有的图像移动到div的一侧，而不是将它们放在一起，并显示：内联块;什么都没改变。
2条答案
按热度按时间5gfr0r5j1#
向#leftWrapper添加2行代码将使图标居中对齐：
这就是你要说的吗？我找不到你在课文中提到的图表。
hxzsmxv22#
我知道你正在尝试将三个包含社交图标链接图像的div标签居中放置在你的作品集网站上。我很感激你在解释这个问题上所做的努力。听起来你已经能够让div标签彼此相邻，但在容器div中居中放置它们时遇到了麻烦。
您可能要尝试的一个解决方案是添加显示：flex到容器div的CSS，然后使用justify-content：center，将三个div标签水平居中。
下面是一个类似的示例
我建议查看以下有用的资源：https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/