JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span class="property"></span>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<span>aaa</span>
<span class="property"></span>
</td>
</tr>
</table>
<br />
<table class="newTable">
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span class="property"></span>
</td>
</tr>
</table>
<br />
<table class="newTable">
<tr>
<td>
<span>aaa</span>
<span class="property"></span>
</td>
</tr>
</table>
<br />
<table class="newTable">
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>aaa</span>
<span class="property"></span>
</td>
</tr>
</table>
CSS
table {
border:solid 1px red;
width:300px;
}
td {
vertical-align:middle;
height:100px;
width:100%;
border:solid 1px green;
}
img {
height:43px;
width:43px;
}
.newTable td > * {
vertical-align : middle;
}
JavaScript
$('.property').each(function () {
var valignValue = $(this).prev().css('vertical-align');
$(this).html("<-- vertical-align : " + valignValue);
});