Home > Back-end >  How to align the textbox inside inline table with the text
How to align the textbox inside inline table with the text

Time:03-10

I have a very simple situation that I can't for some reason resolve. In ASP.NET I am trying to align the textbox inside the inline table with the text so that the text will point at the middle of the textbox, not at its foundation

Here is the markup

    <span style="margin-bottom:10px">This is the text</span>

    <table  border="1">
        <tr>
            <td style="vertical-align:bottom;padding: 0; margin: 0;">
                    <input name="TextBox1" type="text" id="TextBox1" />
             </td>
        </tr>
    </table>

Here is the css

.inlineTable {
    display: inline-table;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

Here is how it looks

enter image description here

As it is seen in the attachment, the text points at the base. How can I move the textbox a bit down so that the text would point to the middle of the left side?

Thank you very much in advance

CodePudding user response:

try vertical-align:middle on the table

.inlineTable {
    display: inline-table;
    padding: 0;  
    
}
table{
vertical-align:middle;}
<span >This is the text</span>

    <table  border="1">
        <tr>
            <td style="vertical-align:middle;padding: 0; margin: 0;">
                <textarea ID="TextBox1">hi</textarea> 
            </td>
        </tr>
    </table>

  • Related