ASP.NET - выравнивание текста - PullRequest
Новая
       39

ASP.NET - выравнивание текста

0 голосов
/ 03 августа 2011

У меня проблема с выравниванием:

Screenshot of alignment problem

Мне нужно, чтобы текст «Удалить причины» был выровнен по вертикали и центрирован красным «X».Я попытался использовать тег div с CSS и style = "verticalalign: middle;"но это заставило «Удалить причины» под «Х».

Как я могу расположить текст по центру?Любая помощь очень ценится!

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 Style 7: 

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

Ответы [ 2 ]

0 голосов
/ 03 августа 2011

Попробуйте это ... 

<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, чтобы все было правильно. Если это работает, вы можете просто переместить встроенные стили в файл css с именами классов (div.className) HTH

0 голосов
/ 03 августа 2011

Вы должны установить атрибут vertical-align для элемента: http://jsfiddle.net/rkw79/Zs5AH/

Есть большая вероятность, что он все равно будет отвлекаться, если высота img мала. При возникновении подобных проблем вам нужно заключить «причины удаления» в тег <span> и присвоить ему атрибут padding-top.

...