如何在HTML中实现文本及ASP控件与图片底部对齐？

我运行了代码A，得到的效果如图片A所示。我希望将这些文本、ASP控件与图片按底部对齐，达到图片B呈现的效果，请问该如何操作？

代码A #

<asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="image" src="Image/edit.png" />
<input type="image" src="Image/save.png" />
<input type="image" src="Image/cancel.png" />

效果对比 #

图片A（当前效果） #

图片B（期望效果） #

要实现底部对齐，核心是给目标元素设置垂直对齐方式为底部，以下是几种实用实现方式：

• 内联样式快速设置：直接给每个控件和图片添加style="vertical-align: bottom;"属性，示例代码：

<asp:Label ID="Label1" runat="server" Text="Label" style="vertical-align: bottom;"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" style="vertical-align: bottom;"></asp:TextBox>
<input type="image" src="Image/edit.png" style="vertical-align: bottom;" />
<input type="image" src="Image/save.png" style="vertical-align: bottom;" />
<input type="image" src="Image/cancel.png" style="vertical-align: bottom;" />

• CSS类统一管控：先定义通用CSS类，再给所有需要对齐的元素添加该类，便于后续维护：

.bottom-align {
    vertical-align: bottom;
}

修改后的ASP代码：

<asp:Label ID="Label1" runat="server" Text="Label" CssClass="bottom-align"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="bottom-align"></asp:TextBox>
<input type="image" src="Image/edit.png" class="bottom-align" />
<input type="image" src="Image/save.png" class="bottom-align" />
<input type="image" src="Image/cancel.png" class="bottom-align" />

• 父容器全局控制：如果元素都在同一个父容器内，给父容器设置Flex布局属性，子元素会自动底部对齐：

.parent-container {
    display: flex;
    align-items: flex-end;
    gap: 8px; /* 可选，添加元素间间距 */
}

将元素放入父容器：

<div class="parent-container">
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <input type="image" src="Image/edit.png" />
    <input type="image" src="Image/save.png" />
    <input type="image" src="Image/cancel.png" />
</div>

以上三种方式都能实现图片B的底部对齐效果，推荐使用CSS类或父容器的方式，更符合代码规范且便于后续调整。

内容的提问来源于stack exchange，提问作者HelloCW