个性化阅读
专注于IT技术分析

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"
                 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, 则应将其居中对齐。

赞(0)
未经允许不得转载:srcmini » HTML表格垂直对齐文字

评论 抢沙发

评论前必须登录!