css - 跨度垂直对齐表内顶部

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>

我知道如果我将 Vertical-align 属性赋予 TD，跨度将出现在页面顶部。但是有什么方法可以指定一些属性来跨度，这会将跨度内的文本移动到页面顶部。

我只想通过向 span 添加一些属性来实现这一点。

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>

你只需要指定span的height，与包含它的td元素一样，设置 width:100% 所以它旁边不会有另一个 inline 元素，并设置 display:inline-block 所以 width 和 height 可以工作。

注意:仅当 td 中只有 1 个 element 时才应使用此方法，即 span