Text under icon, flexbox - flexbox

Question

I want my text to center under my icons but won't get my flexbow to work.
Right now the text is horizontal on the right side of the icon, but I want it to be underneath.
Here is my code.
HTML:
<section class="portfolio-section-green">
<div class="project-card" href="#">
<h4>FOR MORE</h4>
<div class="for-more-wrapper">
<a class="for-more-icon" href ="https://www.linkedin.com/in/johanna-rexin-56207144/">
<img src="./images/linkedin.svg" alt="linkedin" />
</a>
<p class="for-more-name">LINKEDIN</p>
<a class ="for-more-icon" href ="https://github.com/johannarexin">
<img src="./images/github.svg" alt="github" />
</a>
<p class="for-more-name">GITHUB</p>
<a class="for-more-icon" href ="https://stackoverflow.com/c/technigo/users/144/?tab=profile">
<img src="./images/stack_overflow.svg" alt="stack overflow" />
</a>
<p class="for-more-name">STACK OVERFLOW</p>
</div>
</div>
</section>
CSS:
.for-more-wrapper {
display: flex;
}
.for-more-icon {
height: 50px;
width: 50px;
}
.for-more-name {
display: flex;
flex-direction: column;
justify-content: center;
}

Answer 1

The problem is you haven't specified the align-items: center.
When you have normal flex layout (without the column as the direction), then you use justify-content: center, for horizontally centered alignment.
But when you use the flex-direction: column, you are changing the whole flow of the layout, so the justify-content works for vertical alignment and align-items property works for horizontal alignment.
Here's a small demo:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="container">
<img src="https://pngimg.com/uploads/square/square_PNG19.png" width="50px" height="50px" />
<span>Some text</span>
</div>
For your code, I have made some modifications to your code:
.for-more-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
font-family: sans-serif;
font-size: 0.8em;
}
.for-more-icon {
height: 50px;
width: 50px;
}
.for-more-links {
display: flex;
justify-content: center;
gap: 50px;
}
<section class="portfolio-section-green">
<div class="project-card" href="#">
<h4>FOR MORE</h4>
<div class="for-more-links">
<div class="for-more-wrapper">
<a href ="https://www.linkedin.com/in/johanna-rexin-56207144/">
<img class="for-more-icon" src="https://pngimg.com/uploads/square/square_PNG19.png" alt="linkedin" />
</a>
<p class="for-more-name">LINKEDIN</p>
</div>
<div class="for-more-wrapper">
<a href="https://github.com/johannarexin">
<img class="for-more-icon" src="https://pngimg.com/uploads/square/square_PNG19.png" alt="github" />
</a>
<p class="for-more-name">GITHUB</p>
</div>
<div class="for-more-wrapper">
<a class="for-more-icon" href ="https://stackoverflow.com/c/technigo/users/144/?tab=profile">
<img class="for-more-icon" src="https://pngimg.com/uploads/square/square_PNG19.png" alt="stack overflow" />
</a>
<p class="for-more-name">STACK OVERFLOW</p>
</div>
</div>
</div>
</section>