Center items vertically without setting height - html

Question

I'm trying to vertically center certain items within a table cell. I've tried most solutions on stackoverflow and several other sites without any luck.
In this cell, the image is stuck at the top of the table cell, while the text is properly centered vertically:
<tr>
<td class='sidebar-middle'> <!--sets a left and right border-->
<a target="_blank" href="data/Standards.pdf">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 34%; text-align: center;height: 100%;'>
<img src='images/logo.jpg' alt='Standards' style='width: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Local Facility Standards to be Followed</p>
</div>
</a>
</td>
</tr>
However, using the same method, this DOES seem to work:
<tr>
<td class='sidebar-bottom'> <!--sets a left, right, and bottom border-->
<a target="_blank" href="Policies.html">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 35%; text-align: center;height: 100%;'>
<img src='images/patch.png' alt='Policies' style='height: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Policies</p>
</div>
</a>
</td>
In the first (frustrating) example, the image is 112 pixels in height, scaled down to 30. In the second (working) example, the image is 122 pixels in height, scaled down to 80. I suspect that image height has something to do with it, but can't get any further in resolving the problem.

Answer 1

While assigning classes to the elements I didn't see a change. When I replaced the <tr> and <td> with <div> and <section> it didn't change. It just works like the way you wanted it to. There's no style info provided for classes, .sidebar-middle and .sidebar-bottom so that might be your problem (or the rest of the code you neglected to post). Note: I didn't need to modify the div.C or the <section>s I added, so table components may have not been needed and the floats were sufficient.
When using inline styling heavily, your HTML gets cluttered and there's no easy way of fixing it should you have many lines of that coding disaster. As Paulie_D and hidanielle already stated, your vertical-align does not function on floated elements, and HTML table -layouts are so 90s. In the 21st century we use table-* CSS properties.
SNIPPET
.A {
width: 100%;
text-align: center;
overflow: hidden;
}
.B {
float: left;
width: 34%;
text-align: center;
height: 100%;
}
.img {
width: 80px;
height: 80px;
}
.note {
float: right;
width: 64%;
}
<div class='C'>
<section class='sidebar-middle'>
<a target="_blank" href="http://www.orimi.com/pdf-test.pdf">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img' />
</div>
<p class='note'>Local Facility Standards to be Followed</p>
</div>
</a>
</section>
</div>
<div class='C'>
<section class='sidebar-bottom'>
<a target="_blank" href="http://www.example.com">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img'>
</div>
<p class='note'>Policies</p>
</div>
</a>
</section>
</div>

Answer 2

Instead of floats, use CSS Tables (since you started with an actual table for layout).
* {
margin: 0;
padding: 0;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
overflow: hidden;
}
.left {
display: table-cell;
width: 34%;
text-align: center;
background: pink;
}
img {
width: 80px;
}
.right {
display: table-cell;
width: 64%;
vertical-align: middle;
background: lightblue;
}
<a target="_blank" href="data/Standards.pdf">
<div class="inner">
<div class="left">
<img src='http://www.fillmurray.com/80/80' alt='Standards' />
</div>
<p class="right">Local Facility Standards to be Followed</p>
</div>
</a>