[英]HTML table vertical align text
I have the following table and I am trying to vertically align the text for "BEST PRICE PROMISE", "100% MONEY BACK GUARANTEE" etc so they are vertically aligned with the tick marks and I also want to remove the padding at the bottom of these cells? 我有下表,我试图垂直对齐“ BEST PRICE PROMISE”,“ 100%MONEY BACK GUARANTEE”等文本,以便它们与刻度线垂直对齐,并且我也想删除底部的填充这些细胞?
Can someone please tell me how I can do this? 有人可以告诉我我该怎么做吗?
The url is https://ffe-dev.flowersforeveryone.co.za/sea-point-flower-delivery/ 网址为https://ffe-dev.flowersforeveryone.co.za/sea-point-flower-delivery/
Thanks 谢谢
<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>
Align td
vertically in middle and remove h2
margin-bottom 在中间垂直对齐
td
并从底部移开h2
边距
td, th{vertical-align: middle;}
h2{margin-bottom: 0}
TO make envelope clickable add an anchor tag to envelope image 要使信封可点击,请在信封图像上添加锚标记
<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>
The default margin-bottom
of <h2>
is causing this. <h2>
的默认margin-bottom
导致了此问题。 If you set the margin-bottom
to 0 and add vertical-align: middle
to your data cells ( <td>
) it should be aligned in the middle. 如果将
margin-bottom
设置为0并在数据单元格( <td>
) vertical-align: middle
添加vertical-align: middle
,则应将其居中对齐。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.