html - td 数据未正确对齐

Question

我是 Html 设计的新手。我必须使用 html 和 CSS 设计一小部分页面。

我有带有登录按钮图像的背景图像。如何开发它的 Html，使其看起来与所附图片中的表单相同。

到现在为止我已经试过了，但它看起来变形了:

<div class="dvEmployee">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <br />
                <span class="EmployeeLable">Enter your employee number to vote </span>
            </td>
        </tr>
        <tr>
            <td>
                <asp:TextBox runat="server" ID="txtEmpID" ValidationGroup="vdLog" CssClass="input"
                    Height="49px" Width="161px" /><br />
                <asp:RequiredFieldValidator ID="rfgEmp" runat="server" ValidationGroup="vdLog" ControlToValidate="txtEmpID"
                    ErrorMessage="Please enter employee number!"></asp:RequiredFieldValidator>
                <asp:Label runat="server" ID="lblError" Text="" CssClass="lblError"></asp:Label>
            </td>
            <td>
                <asp:ImageButton ID="imgBtn" runat="server" ImageUrl="Images/log_in_button.png" ValidationGroup="vdLog"
                    AlternateText="Log In" OnClick="imgBtn_Click" />
            </td>
        </tr>
    </table>
</div>

我制作的 Css 类:

.dvEmployee
{
    background-image: url('images/log_in_window.png');
    background-repeat: no-repeat;
    width: 466px;
    height: 206px;
    position: relative; /* padding: 100px 30px;*/
    margin: 180px 107px;
    z-index: 2000px;
}

.lblError
{
    font: Arial Regular 12pt #000000;
}

.EmployeeLable
{
    font-family: Arial regular;
    font-size: 29pt;
    color: #404040;
    line-height: 17px;
}

只是给大家，下图是它目前的样子:

Answer 1

使用这个结构:

 <table>
    <tr>
        <td colspan="2">
            <br />
            <span class="EmployeeLable">Enter your employee number to vote </span>
        </td>

    </tr>
    <tr>
     <td class="center">
        <asp:TextBox runat="server" ID="txtEmpID" ValidationGroup="vdLog" CssClass="input"
                     Height="49px" Width="161px" /><br />
        <asp:RequiredFieldValidator ID="rfgEmp" runat="server" ValidationGroup="vdLog" ControlToValidate="txtEmpID"
                            ErrorMessage="Please enter employee number!"></asp:RequiredFieldValidator>
        <asp:Label runat="server" ID="lblError" Text="" CssClass="lblError"></asp:Label>
    </td>
    <td class="center">
        <asp:ImageButton ID="imgBtn" runat="server" ImageUrl="Images/log_in_button.png" ValidationGroup="vdLog"
                            AlternateText="Log In" OnClick="imgBtn_Click" />
    </td>
    </tr>
</table>

样式:

.center{
text-align:center;
}