html - 如何同时垂直对齐底部和顶部？

Question

我想垂直对齐 td 元素顶部的一些元素和 td 元素底部的一些其他元素。

这是我的代码:

<ItemTemplate>
            <td runat="server" style="position:relative;vertical-align:top;">
                <a runat="server" href='#' class="Up">
                </a>
                <br />
                <asp:Label ID="ProductNameLabel" CssClass="Up"/>
                <br /> 
                <asp:Label ID="SummaryLabel" CssClass="Up"/>

                <br />
                <asp:Label ID="PriceLabel" CssClass="Down" />
                <br />
                <a runat="server" href="#" class="Down">                        
                </a>
                <br />
                <asp:Button ID="Button1" CssClass="Down" />
            </td>
        </ItemTemplate>

我想在 td 的顶部显示“Up”类中的元素，在 td 的底部显示“Down”类中的元素。

我试过这个 css:

.Up {
    top:0px;   
}

.Down {
    bottom:0px;    
}

但它没有用。有人可以帮我找到解决方案吗？

Answer 1

如果您在示例中仅提供 HTML 和 CSS，将会有所帮助。

无论如何，我认为你要找的是 position:absolute

.Up {
    position:absolute;
    top:0;   
}

.Down {
    position:absolute;
    bottom:0;    
}

这将使它们相对于具有 position:relative 的第一个父级定位。

请注意，我还从您的 0 中删除了 px，因为当值为 0 时无需指定。0em = 0px = 0% = 0

这里是 a more complete example .