Aligning inner contents with the contents of nearby divs - html

Question

If you look at the demo in fullscreen, I'm trying to align all of the inner contents of each div - e.g. You'll notice that the middle cyan div’s contents are not aligned equally with the first and third cyan divs’ contents.
It's difficult to explain, but look at the position of the icon in the middle cyan div compared to the others. If there's a different amount of text inside of each div, how can I make it so that the inner contents are all aligned vertically with the other cyan divs?
.sections {
background: #f2f2f2;
width: 100%;
height: auto;
text-align: center;
padding: 100px 10%;
box-sizing: border-box;
}
#foster-cta-wrap {
background: yellow;
display: flex;
justify-content: space-evenly;
flex-direction: row;
align-items: center;
flex-flow: row wrap;
}
.foster-cta {
box-sizing: border-box;
width: 250px;min-width: 250px;
height: 200px;
background: cyan;
border: 1px solid grey;
margin-top: 30px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
display: inline-flex;
}
.foster-top {
display: block;
font-size: 30px;
}
.foster-middle {
display: block;
text-transform: uppercase;
font-size: 22px;
font-weight: 400;
}
.foster-bottom {
display: block;
font-weight: 300;
font-size: 16px;
}
.foster-cta:hover {
background: lightgreen;
cursor: pointer;
}
.foster-top a:link, .foster-top a:visited, .foster-middle a:link, .foster-middle a:visited, .foster-bottom a:link, .foster-bottom a:visited {
text-decoration: none;
color: #333;
}
<section class="sections">
<article id="foster-cta-wrap">
<nav class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">search engine optimisation</span>
<span class="foster-bottom">increase the rankings in search results.</span>
</nav><!--
--><nav class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">SEO</span>
<span class="foster-bottom">increase the rankings in search results.</span>
</nav><!--
--><nav onclick="location.href='#';" class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">search engine optimisation</span>
<span class="foster-bottom">increase the rankings in search results.</span>
</nav>
</article>
</section>

Answer 1

.sections {
background: #f2f2f2;
width: 100%;
height: auto;
text-align: center;
padding: 100px 10%;
box-sizing: border-box;
}
#foster-cta-wrap {
background: yellow;
display: flex;
justify-content: space-evenly;
flex-direction: row;
align-items: center;
flex-flow: row wrap;
}
.foster-cta {
box-sizing: border-box;
width: 250px;min-width: 250px;
height: 200px;
background: cyan;
border: 1px solid grey;
margin-top: 30px;
text-align: center;
}
.foster-top {
display: block;
font-size: 30px;
padding: .5em;
}
.foster-middle {
display: block;
text-transform: uppercase;
font-size: 22px;
font-weight: 400;
}
.foster-bottom {
display: block;
font-weight: 300;
font-size: 16px;
}
.foster-cta:hover {
background: lightgreen;
cursor: pointer;
}
.foster-top a:link, .foster-top a:visited, .foster-middle a:link, .foster-middle a:visited, .foster-bottom a:link, .foster-bottom a:visited {
text-decoration: none;
color: #333;
}
<section class="sections">
<article id="foster-cta-wrap">
<nav class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">search engine optimisation</span>
<span class="foster-bottom">increase the rankings in search results.</span>
</nav>
<nav class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">SEO</span>
<span class="foster-bottom">increase the rankings in search results.</span>
</nav>
<nav onclick="location.href='#';" class="foster-cta">
<span class="foster-top">icon</span>
<span class="foster-middle">search engine optimisation</span>
<span class="foster-bottom">increase the rankings in search results.</span>
</nav>
</article>
</section>
This is what I would do: I removed all the flex formatting on .foster-cta and replaced it with text-align: center;. Then, I added padding to .foster-top to make it look nicer and not contact the other text. The caption is now pushed up against the main title, but this can be fixed by setting padding / margin values for either of them.