英文:
Issue aligning divs horizontally within two parent divs
问题
我正在尝试将包含社交图标的链接图像的三个 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。当使用表格时，图像的大小会自动居中，通过在图像的两侧添加空白空间来使其变宽。这实现了示意图中显示的第一个效果，而没有填充或边距的更改可以修复它。使用浮动只会将所有图像移到 div 的一侧，而不是将它们放在一起，而 display: inline-block; 不会改变任何内容。
英文:
I'm trying to line up three div tags that contain linked images for social icons on a portfolio website. I've been able to get them next to each other, but have only been able to get them evenly spaced across the container div, but I want them to be justified to the center. This is hard to explain, so I've attached a diagram to make it clearer. The issue may have something to do with the container divs I've used, but I'd love any help trying to solve this. Below is the code I've used, with very little removed so as to give further context to the problem:
<!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>
I've tried using tables and messing around with padding and margins, as well as using float: left; and display: inline-block. When using a table, the image size automatically centers itself by adding empty space to the sides of the image to make it wider. This achieves the first effect shown in the diagram, and no padding or margin changes can fix it. Using float just moves all of the images to one side of the div, without putting them next to each other, and display: inline-block; changed nothing.
答案1
得分: 0
在 #leftWrapper 中添加 2 行代码将使图标居中对齐：
#leftWrapper {
color: white;
width: 30%;
height: 100%;
position: absolute;
margin: 0%;
padding: 0%;
text-align: center;
font-family: 'Trebuchet MS';
/* 在此注释下方添加的代码行 */
display: flex;
justify-content: center;
这是你的意思吗？我找不到你在文本中提到的图表。
英文:
Adding 2 lines of code to #leftWrapper will align the icons in the center:
#leftWrapper {
color: white;
width: 30%;
height: 100%;
position: absolute;
margin: 0%;
padding: 0%;
text-align: center;
font-family: 'Trebuchet MS';
/*added line of code below this comment*/
display: flex;
justify-content: center;
Is this what you ment? I could not find the diagram you mentioned in the text.
答案2
得分: 0
我明白您正在尝试将包含链接图像的三个div标签居中，用于您的作品集网站上的社交图标。我欣赏您在解释问题方面所付出的努力。听起来您已经成功将这三个div标签放在一起，但在容器div内居中它们时遇到了问题。
您可以尝试的一个解决方法是在容器div的CSS中添加display: flex，然后使用justify-content: center来水平居中这三个div标签。
以下是一个类似的示例：
body {
width: 100%;
height: 100vh;
border: 1px solid red;
}
main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
margin: 5px;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
margin: 5px;
}
.icon-container .icon {
width: 50px;
height: 50px;
margin: 0px 5px;
}
.icon-container .icon img {
width: 100%;
height: 100%;
object-fit: containe; /* 这里有一个拼写错误，应为"container" */
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<div class="icon-container">
<div class="icon">
<a href="www.facebook.com">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670124.png" />
</a>
</div>
<div class="icon">
<a href="www.twitter.com">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670127.png" />
</a>
</div>
<div class="icon">
<a href="www.instagram.com">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670125.png" />
</a>
</div>
</div>
</main>
</body>
</html>
我建议您查看这个有用的资源：https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
英文:
I understand you are trying to center three div tags containing linked images for social icons on your portfolio website. I appreciate the effort you've put into explaining the issue. It sounds like you have been able to get the div tags next to each other but are having trouble centering them within the container div.
One solution you might want to try is adding display: flex to the container div's CSS and then using justify-content: center to center the three div tags horizontally.
Here is a similar example
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
body {
width: 100%;
height: 100vh;
border: 1px solid red;
}
main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
margin: 5px;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
margin: 5px;
}
.icon-container .icon {
width: 50px;
height: 50px;
margin: 0px 5px;
}
.icon-container .icon img {
width: 100%;
height: 100%;
object-fit: containe;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<div class="icon-container">
<div class="icon">
<a href="www.facebook.com">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670124.png" />
</a>
</div>
<div class="icon">
<a href="www.twitter.com">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670127.png" />
</a>
</div>
<div class="icon">
<a href="www.instagram.com">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670125.png" />
</a>
</div>
</div>
</main>
</body>
</html>
<!-- end snippet -->
I recommend checking out this helpful resource: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论