Question

我有一个跨在桌子里面和Div里面的跨度。我希望此范围显示在页面顶部

以下是代码

 <table width="100%">
    <tr valign="middle">
        <td width="50%" align="center" height="700">
            <div id="divAlert" runat="server" style="font-size: 26px; text-align: center; vertical-align: middle;">
              <span>Please try back after some time</span>
            </div>
        </td>
    </tr>
</table>

我知道如果我将垂直对齐属性赋予TD，则跨度将出现在页面顶部。但有没有什么方法可以指定一些属性来跨越，这将把文本移到跨页的顶部。

我想通过添加一些属性来实现这一目标。

Answer 1

我能想到的最佳方式就是你已经知道的，即通过向vertical-align: top;元素添加样式td

但是如果你想要另一种方式，你也可以在没有position: absolute;

的情况下使用它

<table width="100%">
  <tr valign="middle">
    <td width="50%" align="center" height="700">
      <div id="divAlert" runat="server" style="font-size: 26px; text-align: center; vertical-align: middle;">
        <span style="height:700px;display:inline-block">Please try back after some time</span>
      </div>
    </td>
  </tr>
</table>

您只需要指定height的{{1}}，与包含它的span元素相同，设置td，这样就不会有另一个width:100%旁边有inline个元素，并设置display:inline-block，以便width和height可以正常工作。

注意：只有在element内只有td span

时才会使用此选项

Answer 2

不使用绝对定位，您只需执行此操作

table tr td{
    vertical-align: top;
}

检查Fiddle。

Answer 3

没有办法实现这一目标。因为该边距由td标签提供

<table width="100%">
    <tr>
        <td width="50%" height="100%" align="center" height="700">
            <div id="divAlert" runat="server" style="font-size: 26px;">
              <span>Please try back after some time</span>
            </div>
        </td>
    </tr>
</table>

跨度垂直对齐顶部内表

3 个答案: