我有下表, 并且我尝试垂直对齐” 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"
alt="" 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"
alt="" 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" alt="" 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" alt="" width="50" height="50" scale="0"></a></td>
<td align="left"><b> hello@flowersforeveryone.co.za </b></td>
</tr>
#2
<h2>的默认空白边距导致了此问题。如果将margin-bottom-bottom设置为0并在数据单元格(<td>)中添加vertical-align:middle, 则应将其居中对齐。
评论前必须登录!
注册