链接按钮的中心内容答案

【问题标题】：center content of linkbutton链接按钮的中心内容
【发布时间】：2014-02-18 09:58:41
【问题描述】：

我在 div 中有一个链接按钮。我已经使用 css 将 div 的高度和宽度设置为看起来像一个正方形。我还通过 css 设置了 linkButton 的高度和宽度。还有我的链接按钮显示属性设置为块。（以获得整个控件的超链接效果）。我现在想要的是将 LinkButton 文本垂直和水平居中。

我尝试了所有可能的 div 和 linkbutton 属性，但没有成功。我能做到这一点的唯一方法是设置 padding(top, left, right) 但它会弄乱布局。

 .divblock
 {
     background-color :#EEEEEE;
     border:2px solid;
     width : 90px;
     height :80px; 
 }

 .Linkbutton
 {
     text-decoration: none ;
     color :black  !important;
     display:block;
     width : 85px;
     height :80px;
}

aspx:

<div id="myDiv" runat="server">

            <asp:DataList ID="dl1"  runat="server" RepeatDirection="Horizontal"      ItemStyle-CssClass ="Items"  ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    **<div class ="divblock">**
                    <asp:LinkButton **CssClass="Linkbutton"** OnCommand="PresItems_Command"     ID="TestLB1" runat="server" Text="Test" />
                   </div> 
                 </ItemTemplate>
</asp:DataList>
</div>

【问题讨论】：

文本对齐：居中；垂直对齐：中间；不工作？

标签： asp.net css

【解决方案1】：

这是一种可能适合您的解决方案：

Demo Fiddle

HTML：

<div class="divblock">
  <a href="" class="linkbutton">Lorem ipsum.</a>
</div>

CSS：

.divblock {
     //other styles

     display: table;
     text-align: center;
 }

 .linkbutton {
     //other styles

     display: table-cell;
     vertical-align: middle;
}

【讨论】：