Center FileUpload control in Page using Bootstrap in ASP.Net

Last Reply 22 days ago By dharmendr

Posted 23 days ago

How do I make everything on the web form to be in the center of the page/window, including fileupload control, buttons and image controls.

Fileupload control is not mvoing to the center of the page

HTML: 

       <div class="content">
           <div class="container" style="text-align: center;">
               <div class="form-horizontal">
                   <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="true" Font-Size="Large" ForeColor="#00003D" Font-Names="Nunito" NavigateUrl="~/QRCode.aspx">Go to Portrait Mode</asp:HyperLink>
               </div>
           </div>
           <div class="container" style="margin: 0 auto; margin-top: 0%; text-align: justify; text-align: center; margin-left: 5%;">
               <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);" />
 
               <asp:Label ID="Labelconfirm" runat="server" Font-Size="Large"></asp:Label>
               <div class="row">
                   <asp:Image ID="Image3" runat="server" Width="600px" Height="350" />
                   &nbsp;&nbsp;&nbsp;<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100" Height="100" />
               </div>
               <br />
               <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary navbar-btn" Text="Generate QR Code" Width="190px" Height="40px" OnClick="Button1_Click" />
               <asp:Button ID="finish" runat="server" Height="40px" CssClass="btn btn-primary navbar-btn" OnClick="finish_Click" Text="Finish" Width="190px" />
               <div>
                   <asp:Label ID="lblMessage" runat="server"></asp:Label></div>
           </div>
       </div>

 

You are viewing reply posted by: dharmendr 22 days ago.
Posted 22 days ago

Use below code. Set the style display property. Initially it block.

HTML

<div class="content">
    <div class="container" style="text-align: center;">
        <div class="form-horizontal">
            <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="true" Font-Size="Large" ForeColor="#00003D" Font-Names="Nunito" NavigateUrl="~/QRCode.aspx">Go to Portrait Mode</asp:HyperLink>
        </div>
    </div>
    <div class="container" style="margin: 0 auto; margin-top: 0%; text-align: justify; text-align: center; margin-left: 5%;">
        <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" Style="display: inline !important;" onchange="ImagePreview(this);" />
        <asp:Label ID="Labelconfirm" runat="server" Font-Size="Large"></asp:Label>
        <div class="row">
            <asp:Image ID="Image3" runat="server" Width="600px" Height="350" />
            &nbsp;&nbsp;&nbsp;<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100" Height="100" />
        </div>
        <br />
        <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary navbar-btn" Text="Generate QR Code" Width="190px" Height="40px" />
        <asp:Button ID="finish" runat="server" Height="40px" CssClass="btn btn-primary navbar-btn" Text="Finish" Width="190px" />
        <div>
            <asp:Label ID="lblMessage" runat="server"></asp:Label>
        </div>
    </div>
</div>