RegularExpressionValidator in EditTemplate

Question

I have abc.aspx as below

<asp:content id="Content" ContentPlaceHolderID="cpContent" runat="server">

        <style type="text/css">
                .textbox-align-center {
                  display: flex;
                  text-align: center;
                }
        </style>
    
<asp:Panel ID="pnlPresentation" runat="server" Width="105%" ScrollBars="Auto">
        <asp:GridView ID="gridPresentation" runat="server" AutoGenerateColumns="False" >
    

        
        <asp:TemplateField HeaderText="abc" ItemStyle-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>
        </asp:GridView>
                
</asp:Panel> 
</asp:content>

When I open EditTemplate, TexBox which has validator is not aligned center.

How can I align it to center?

Answer 1

I removed CssClass in RegularExpressionValidator and have added div and placed EditTemplate and TextBox in it.

The updated code is here,

<asp:content id="Content" ContentPlaceHolderID="cpContent" runat="server">

        <style type="text/css">
                .textbox-align-center {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: center;
                }
        </style>
    
<asp:Panel ID="pnlPresentation" runat="server" Width="105%" ScrollBars="Auto">
   <asp:GridView ID="gridPresentation" runat="server" AutoGenerateColumns="False" >
        <asp:TemplateField HeaderText="abc" ItemStyle-HorizontalAlign="Center">
        <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">
                                </asp:RegularExpressionValidator>                        
                                <asp:TextBox ID="txtABC_Edit" runat="server" Text='<%# Eval("[26_ABC]") %>'></asp:TextBox>
</div>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblABC" runat="server" AutoPostBack="true" OnTextChanged="txtABC_TextChanged" 
                                    Text='<%# Eval("[26_ABC]")%>' Width="100%" />
                            </ItemTemplate>
         </asp:TemplateField>
        </asp:GridView>
                
</asp:Panel> 
</asp:content>