HTML表格垂直对齐文字

我有下表, 并且我尝试垂直对齐” BEST PRICE PROMISE” , ” 100％MONEY BACK GUARANTEE” 等文本, 以便它们与刻度线垂直对齐, 并且我也想删除底部的填充这些细胞？
有人可以告诉我我该怎么做吗？
网址为https://ffe-dev.flowersforeveryone.co.za/sea-point-flower-delivery/
谢谢

< table class="table_seapoint" border="1px"> < tbody> < tr> < td rowspan="10"> < img style="display:block; " width="309px" height="324px" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/smile_sea_point.jpg" alt="Sea Point Flowers"> < /td> < td colspan="4"> < h1 style="font-weight:lighter; font-size:26px; "> STUNNING LUXURY FLOWER BOUQUETS < /h1> < /td> < /tr> < tr> < td colspan="4"> < h1 style="font-weight:lighter; font-size:26px; "> FRESHLY CUT AND HAND-DELIVERED IN < /h1> < /td> < /tr> < tr> < td colspan="4"> < h1 style="font-weight:lighter; font-size:26px; "> SEA POINT AND ACROSS THE WESTERN CAPE < /h1> < /td> < /tr> < tr> < td> < img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg" alt="Flowers Sea Point" width="50" height="50"> < /td> < td style="padding-left: 10px; " colspan="3"> < h2 style="font-weight:lighter; font-size:22px; "> BEST PRICE PROMISE< /h2> < /td> < /tr> < tr> < td> < img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg" alt="Flowers Sea Point" width="50" height="50"> < /td> < td align="left" style="padding-left: 10px; " colspan="3"> < h2 style="font-weight:lighter; font-size:22px; "> 100% MONEY BACK GUARANTEE < /h2> < /td> < /tr> < tr> < td> < img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg" alt="Flowers Sea Point" width="50" height="50"> < /td> < td align="left" style="padding-left: 10px; " colspan="3"> < h2 style="font-weight:lighter; font-size:22px; "> QUICK AND EASY ONLINE ORDERING < /h2> < /td> < /tr> < tr> < td> < img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg" alt="Flower Delivery Sea Point" width="50" height="50"> < /td> < td align="left" style="padding-left: 10px; " colspan="3"> < h2 style="font-weight:lighter; font-size:22px; "> 24/7 CUSTOMER SERVICE < /h2> < /td> < /tr> < tr> < td> < img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg" alt="Flower Delivery Sea Point" width="50" height="50"> < /td> < td align="left" style="padding-left: 10px; " colspan="3"> < h2 style="font-weight:lighter; font-size:22px; "> HAPPINESS ASSURED < /h2> < /td> < /tr> < tr> < td colspan="4" nowrap="nowrap"> < h1 style="font-weight:lighter; font-size:26px; "> ORDER BEFORE 12 NOON FOR NEXT DAY DELIVERY < /h1> < /td> < /tr> < tr> < td align="right"> < img class="alignnone size-full wp-image-4385" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/telephone.svg" width="50" height="50"/> < /td> < td align="left" nowrap="nowrap"> < b> 079 885 9609 < /b> < /td> < td align="right"> < img class="alignnone size-full wp-image-4386" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope.svg" width="50" height="50"/> < /td> < td align="left"> < b> hello@flowersforeveryone.co.za < /b> < /td> < /tr> < /tbody> < /table>

#1将td垂直对齐在中间, 并从下移h2边距

td, th{vertical-align: middle; } h2{margin-bottom: 0}

要使信封可点击, 请在信封图像上添加锚标签

< tr> < td align="right"> < img class="alignnone size-full wp-image-4385" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/telephone.svg" width="50" height="50" scale="0"> < /td> < td align="left" nowrap="nowrap"> < b> 079 885 9609 < /b> < /td> < td align="right"> < a href="mailto:"> < img class="alignnone size-full wp-image-4386" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope.svg" width="50" height="50" scale="0"> < /a> < /td> < td align="left"> < b> hello@flowersforeveryone.co.za < /b> < /td> < /tr>

#2【HTML表格垂直对齐文字】< h2> 的默认空白边距导致了此问题。如果将margin-bottom-bottom设置为0并在数据单元格(< td> )中添加vertical-align：middle, 则应将其居中对齐。