我有下表, 并且我尝试垂直对齐”
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, 则应将其居中对齐。
推荐阅读
- 我如何在定制器woocommerce部分下添加选项()
- 如何使用wp_get_theme修改singlepost.php
- 如何在storefront主题中将SVG用于徽标
- 如何在页面模板(WordPress)中使用获取请求
- 如何在帖子URL中使用自定义元字段代替CPT标题()
- 如何在WordPress 5.0中使用经典编辑器
- 如何使用子主题更新WordPress主题文件
- 如何使用更新查询更新WordPress中的表值()
- 将产品添加到购物车后如何更新微型购物车