EditTemplate中带RegularExpressionValidator的TextBox居中问题咨询

针对你遇到的EditTemplate里TextBox无法居中的问题，提供以下几种可行的解决办法：

方法一：设置TemplateField的编辑项样式 #

直接给asp:TemplateField添加EditItemStyle-HorizontalAlign="Center"属性，让编辑模式下的整个单元格内容自动居中：

<asp:TemplateField HeaderText="abc" ItemStyle-HorizontalAlign="Center" EditItemStyle-HorizontalAlign="Center">
    <EditItemTemplate>
        <asp:RegularExpressionValidator ID="regexValidatorABC" runat="server" ControlToValidate="txtABC_Edit"
            ValidationExpression="^[A-Z]{1,3}\d{0,4}$" 
            ErrorMessage="Please enter a valid input with minimum length 3, maximum length 7 (with 1-3 Capitals letters followed by 4 digits), and no spaces."
            ForeColor="Red" Font-Size="Small" CssClass="textbox-align-center">
        </asp:RegularExpressionValidator>                        
        <asp:TextBox ID="txtABC_Edit" runat="server" Text='<%# Eval("[26_ABC]") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="lblABC" runat="server" AutoPostBack="true" OnTextChanged="txtABC_TextChanged" 
            Text='<%# Eval("[26_ABC]")%>' Width="100%" />
    </ItemTemplate>
</asp:TemplateField>

方法二：调整CSS并包裹编辑控件 #

修改现有CSS，让居中类作用于容器，然后用div包裹Validator和TextBox：

1. 更新CSS样式：

.textbox-align-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.validation-error {
  width: 100%; /* 让错误信息占满单元格宽度，文字居中 */
  margin-bottom: 4px;
}

2. 修改EditItemTemplate：

<EditItemTemplate>
    <div class="textbox-align-center">
        <asp:RegularExpressionValidator ID="regexValidatorABC" runat="server" ControlToValidate="txtABC_Edit"
            ValidationExpression="^[A-Z]{1,3}\d{0,4}$" 
            ErrorMessage="Please enter a valid input with minimum length 3, maximum length 7 (with 1-3 Capitals letters followed by 4 digits), and no spaces."
            ForeColor="Red" Font-Size="Small" CssClass="validation-error">
        </asp:RegularExpressionValidator>                        
        <asp:TextBox ID="txtABC_Edit" runat="server" Text='<%# Eval("[26_ABC]") %>'></asp:TextBox>
    </div>
</EditItemTemplate>

方法三：直接给TextBox添加居中样式 #

给TextBox单独添加CSS类，让它自身居中：

1. 添加CSS：

.centered-textbox {
  display: block;
  margin: 0 auto;
  text-align: center;
}

2. 给TextBox应用类：

<asp:TextBox ID="txtABC_Edit" runat="server" Text='<%# Eval("[26_ABC]") %>' CssClass="centered-textbox"></asp:TextBox>

以上三种方法都能实现编辑模式下TextBox的居中效果，其中方法一最为简洁，直接利用GridView的内置样式属性即可完成。

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