ASP.NET - 文本对齐

发布于 2024-11-27 21:14:44 字数 1304 浏览 1 评论 0原文

我遇到了对齐问题：

对齐问题的屏幕截图

我需要的是“删除原因”文本垂直对齐，以红色“X”为中心。我尝试使用带有 CSS 和 style="verticalalign: middle;" 的 div 标签但它迫使“删除原因”位于“X”下方。

如何使文本垂直居中？非常感谢任何帮助！

PS - 这是代码：

 <tr>
     <td class="style7" valign="middle">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <asp:ImageButton ID="ibClearReasons" runat="server" Height="30px" Width="30px" ImageUrl="~/Images/DeleteRed.png" AlternateText="Delete" />Delete Reasons
            </ContentTemplate>
         </asp:UpdatePanel>
     </td>

     <td class="style6">
         <asp:LinkButton ID="SendToBatch" runat="server" BackColor="#20548E" BorderColor="#20548E" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="Small" Font-Underline="False" 
                                 ForeColor="White" Height="16px" Width="85px" EnableViewState="True" CausesValidation="False"><center>Send To Batch</center></asp:LinkButton>&#160;&#160;&#160;&#160;
     </td>
 </tr>

编辑： CSS 样式 7：

.style7
    {
        text-align: left;
        vertical-align: middle;
    }

原文

I've got an alignment issue:

Screenshot of alignment problem

What I need is for the 'Delete Reasons' text to be vertically aligned, centered with the red 'X'. I tried using a div tag with CSS and style="verticalalign: middle;" but it forced 'Delete Reasons' to go underneath the 'X'.

How can I vertically center the text? Any help is greatly appreciated!

PS - Here's the code:

 <tr>
     <td class="style7" valign="middle">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <asp:ImageButton ID="ibClearReasons" runat="server" Height="30px" Width="30px" ImageUrl="~/Images/DeleteRed.png" AlternateText="Delete" />Delete Reasons
            </ContentTemplate>
         </asp:UpdatePanel>
     </td>

     <td class="style6">
         <asp:LinkButton ID="SendToBatch" runat="server" BackColor="#20548E" BorderColor="#20548E" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="Small" Font-Underline="False" 
                                 ForeColor="White" Height="16px" Width="85px" EnableViewState="True" CausesValidation="False"><center>Send To Batch</center></asp:LinkButton>    
     </td>
 </tr>

EDIT: CSS Style 7:

.style7
    {
        text-align: left;
        vertical-align: middle;
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

机场等船 2024-12-04 21:14:44

您必须在元素上设置 vertical-align 属性：http://jsfiddle。 net/rkw79/Zs5AH/

如果 img 高度很小，它很有可能仍然看起来不合适。对于此类问题，您需要将“删除原因”包装在标记内，并为其指定 padding-top 属性。

回复收藏 0 原文

情魔剑神 2024-12-04 21:14:44

试试这个...

<td class="style7" valign="middle">
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="float:left;margin:0px 4px;width:30px;">
                <asp:ImageButton ID="ibClearReasons" 
                                 runat="server" 
                                 Height="30px" 
                                 Width="30px" 
                                 ImageUrl="~/Images/DeleteRed.png" 
                                 AlternateText="Delete" />
            </div>
            <div style="float:left;height:30px;padding:6px 0px;width:100px;">
                 Delete Reasons
            </div>
            <div style="clear:both"></div>
        </ContentTemplate>
     </asp:UpdatePanel>
 </td>

您可能需要调整第二个 div 上的填充和/或宽度才能使其恰到好处。如果这有效，您只需将内联样式移动到具有类名 (div.className) HTH 的 css 文件中

Try this...

<td class="style7" valign="middle">
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="float:left;margin:0px 4px;width:30px;">
                <asp:ImageButton ID="ibClearReasons" 
                                 runat="server" 
                                 Height="30px" 
                                 Width="30px" 
                                 ImageUrl="~/Images/DeleteRed.png" 
                                 AlternateText="Delete" />
            </div>
            <div style="float:left;height:30px;padding:6px 0px;width:100px;">
                 Delete Reasons
            </div>
            <div style="clear:both"></div>
        </ContentTemplate>
     </asp:UpdatePanel>
 </td>

You may have to play with the padding and/or width on the second div to get it to be just right. If this works, you can simply move the inline styles to a css file with class names (div.className) HTH

回复收藏 0 原文

~没有更多了~