ASP.NET：如何让LinkButton文本垂直居中？已尝试方案未生效

我来帮你搞定这个垂直居中的小问题！首先得说清楚为啥你原来的代码没效果：vertical-align: middle这个属性在默认的块级div上根本不起作用，它只对行内元素、行内块元素或者表格单元格生效。你直接给div加这个样式，自然看不到预期的居中效果。

下面给你几个实用的解决方案，按需选就行：

方案1：表格单元格布局（兼容性拉满） #

把div改成表格单元格的显示模式，再给它设置一个明确的高度（不然看不出居中效果），这样vertical-align: middle就能正常工作了：

<div style="display: table-cell; vertical-align: middle; height: 80px; background: #eee;">
    <asp:LinkButton ID="REQUEST_TAB_LINKBUTTON" runat="server" 
        style="text-decoration:none; background-color:#CCCCCC; font-family:Arial; font-size:X-Large;"
        >&nbsp;Ask&nbsp;for&nbsp;help&nbsp;</asp:LinkButton>
</div>

方案2：Flex布局（现代开发首选） #

Flex布局是现在最简洁的居中方式，只需要给div加两个样式，就能轻松实现垂直居中，完全不用纠结元素类型：

<div style="display: flex; align-items: center; height: 80px; background: #eee;">
    <asp:LinkButton ID="REQUEST_TAB_LINKBUTTON" runat="server" 
        style="text-decoration:none; background-color:#CCCCCC; font-family:Arial; font-size:X-Large;"
        >&nbsp;Ask&nbsp;for&nbsp;help&nbsp;</asp:LinkButton>
</div>

方案3：行高匹配法（单行文本专属） #

如果你的LinkButton是固定高度的单行文本，直接把它的line-height设置成和高度一致的值，也能实现垂直居中，非常简单：

<div>
    <asp:LinkButton ID="REQUEST_TAB_LINKBUTTON" runat="server" 
        style="text-decoration:none; background-color:#CCCCCC; font-family:Arial; font-size:X-Large; display: inline-block; height: 80px; line-height: 80px;"
        >&nbsp;Ask&nbsp;for&nbsp;help&nbsp;</asp:LinkButton>
</div>

这里要注意给LinkButton加上display: inline-block，因为默认的a标签是行内元素，设置height和line-height需要改成行内块或块级元素才生效。

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