如何在ASPX中居中日期输入框并解决span顶部错位问题

问题根源 #

1. 最外层<td>的valign="top"属性强制内容垂直顶对齐，这是导致错位的核心原因
2. 包裹表格的<span>是行内元素，行内元素的默认布局规则会干扰表格的居中显示
3. 内部表格的<td>未明确设置垂直对齐，可能继承了外部的顶对齐样式

具体修改方案 #

• 调整外层td的垂直对齐
  把最外层的<td valign="top" class="style1">修改为<td valign="middle" class="style1">，直接将整个单元格内容垂直居中。如果不想全局修改，也可以通过CSS给这个td加样式：style="vertical-align: middle;"。

• 替换行内span为块级元素
  将包裹表格的<span id="spnDateFields">和<span id="spnMonthliesOnly">换成<div>，因为div是块级元素，不会有行内元素的布局限制，能更好地包裹表格并保持居中：

  <div id="spnDateFields">
      <!-- 日期表格内容 -->
  </div>
  <div id="spnMonthliesOnly">
      <!-- 复选框表格内容 -->
  </div>
  

  要是不想修改标签，也可以给span添加display:block样式：style="display:block;"。

• 给内部表格的td设置垂直居中
  给日期表格里的每个<td>添加valign="middle"属性，确保单元格内的输入框、文字和图标都垂直居中：

  <tr>
      <td valign="middle">
          <span id="spnBeginDate">Begin Date</span>&nbsp;
      </td>
      <td valign="middle">
          <span id="spntxtBeginDate">
              <input id="beginDate" type="text" runat="server" name="beginDate" style="width: 72px;">
          </span>&nbsp;
      </td>
      <td valign="middle">
          <span id="spnBeginDateImage">
              <img id="selectBeginDate" onclick="SelectBeginDate();" src="../../Images/calendar.gif" style="cursor: hand" />
          </span>&nbsp;
      </td>
  </tr>
  

修改后的完整代码示例 #

<td valign="middle" class="style1">
    <div id="patientFilterDiv" style="width: 280px; height: 390px;" class="nonScrollingDiv1">
        <div id="spnDateFields">
            <table align="center" class='listStyle1'>
                <tr>
                    <td valign="middle">
                        <span id="spnBeginDate">Begin Date</span>&nbsp;
                    </td>
                    <td valign="middle">
                        <span id="spntxtBeginDate">
                            <input id="beginDate" type="text" runat="server" name="beginDate" style="width: 72px;">
                        </span>&nbsp;
                    </td>
                    <td valign="middle">
                        <span id="spnBeginDateImage">
                            <img id="selectBeginDate" onclick="SelectBeginDate();" src="../../Images/calendar.gif"
                                style="cursor: hand" />
                        </span>&nbsp;
                    </td>
                </tr>
                <tr>
                    <td valign="middle">
                        <span id="spnEndDate">End Date</span>
                    </td>
                    <td valign="middle">
                        <input id="endDate" type="text" runat="server" name="endDate" style="width: 72px;">
                    </td>
                    <td valign="middle">
                        <img id="selectEndDate" onclick="SelectEndDate();" src="../../Images/calendar.gif"
                            style="cursor: hand" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="spnMonthliesOnly">
            <table align="center" class='listStyle1'>
                <tr>
                    <td valign="middle">
                        <input id="majorsOnly" type="checkbox" />Monthlies Only<br/> <span style="display: none">
                            <input id="chkEndOfMonth" type="checkbox" />Last Test Of The Month</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</td>

内容的提问来源于stack exchange，提问作者ktestcody