How to vertically center text adjacent to image in grid alignment? - html

Question

Trying to vertically center align text next to an image in a three across grid alignment. Have tried many things but either one of two things happens:
- text vertically center aligns for one row of text, but wraps under the image if there is more than one row of text
- text wraps properly for multiple rows of text, but won't vertically center align, as shown in the provided code
Any suggestions?
.tile-third {
font-size: 18px;
text-transform: uppercase;
float: left;
width: 25%;
margin-right: 1%;
margin-bottom: 1%;
}
.tile-image {
vertical-align:middle;
float:left;
margin-right: 1%;
background-color:#000;
}
.tile-text {
}
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-outside.png"/>
<div class="tile-text">Department Description One (DD1)</div>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-lowimpact.png"/>
<span class="tile-text">Department Description Two</span>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-fun.png"/>
<span class="tile-text">Department Description Three (DD3)</span>
</a>
</div>

Answer 1

the image and the text is inside in an anchor tag,
change the style of the anchor tag to achieve the required.
example,
.tile-third a {
height: 100%;
display: flex;
align-items: center;
}

Answer 2

Is this what you are looking for??
.tile-third {
display: inline-block;
font-size: 18px;
text-transform: uppercase;
width: 30%;
}
.tile-third > a {
align-items: center;
display: flex;
}
.tile-image {
background-color:#000;
margin-right: 2%;
}
.tile-text {
}
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-outside.png"/>
<div class="tile-text">Department Description One (DD1)</div>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-lowimpact.png"/>
<span class="tile-text">Department Description Two</span>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-fun.png"/>
<span class="tile-text">Department Description Three (DD3)</span>
</a>
</div>
I set the display value for the <a> tag under the <div class="tile-third"> to flex which is an easy way to get things to properly align.
This allows the <img> and <div> inside the <a> to properly align.