如何在网格对齐中使与图像相邻的文本垂直居中？

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.