Positioning the HTML form in the middle of the page

The given HTML code generates a form within a table, but despite aligning the table to the center, it remains on the left side of the webpage.

 <!DOCTYPE html>
<html>
<head>
    <style>input.textfill {
        float: right;
    }</style>
    <link type="text/css" rel="stylesheet" href="order.css" >
            <script type="text/javascript">


           var textbox = function(me){
  if(me.checked == false){
    var textb = document.createElement('textarea');

    textb.name = "Address";

      textb.id="Address";

      textb.required=true;




      textb.placeholder="Address";
    me.parentNode.appendChild(textb);


  }
  setInterval(function(){
    if(me.checked == false){
       me.parentNode.removeChild(textb);
       return false;
    }
  });
}; 

            var i = 1;

function addkid() {
    if (i <= 2) {
        i++;
        var div = document.createElement('div');
        div.innerHTML ='<br><div class="headingbox">'+ 'Prescription Copy-'+i+':'+'</div>'+'<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn-' + i + '">Upload</span>'+'</label>'+'  <input id=remove type="button" value="-" onclick="removekid(this)">';
        document.getElementById('kids').appendChild(div);

        document.getElementById("uploadBtn-" + i).onchange = function()  {
            document.getElementById("uploadFile-"+i).value = this.value;
        };
    }
}



function removekid(div) {
  document.getElementById('kids').removeChild(div.parentNode);
  i--;
}



            </script>
    </head>

     <body bgcolor="#E6E6FA">
        <form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data"  onsubmit="return Validate(this);onTimeChange ();">

            <table align="Center"  >

               <tr><td height="40"><br>
            <div class="headingbox" id="hBoxNIC" > National ID  </div>
            <div style="width:100%;text-align:center;">
            <input type="text" placeholder="920290505v" maxlength="13" name=NIC required   autofocus  />
                   </div>

            </td></tr>
            <tr><td height=50 ><div class="headingboxs">Pick up</div>
                <input   type=radio name=DP  required value="Pickup">

<div style="  float: right;"><div class="headingboxs">
    Delivery</div>
                    <input  class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>


<tr><td height="50"><div class="headingbox" >Expected Time </div>
            <div style="width:100%;text-align:center;">
            <input type="time" id=time  autofocus name=DPTime    onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
            </div>

               <div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM  </div>
    <script>
var input =  document.getElementById('time');
function validateTime (element) {

var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'

if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}

}       

</script>  

                </td></tr>


<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
            <div style="width:100%;text-align:center;">

            <input type="text" maxlength=10;  autofocus name=Tele /><br>
            </div>
            <div class="error" id="phoneerror" > error occured </div><br></td></tr>





            <tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
            <div style="width:100%;text-align:center;">
            <input type="text"  autofocus name=Email placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="522a2a2a12353f333b3e7c313d3f">[email protected]</a>"    /><br>
            </div>
            <div class="error" id="emailerror" > error occured </div><br>

                </td></tr>
                         <tr>
                    <td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">

<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />


<label class="fileUpload">
    <input id="uploadBtn" type="file" class="upload" name=Image1 />
    <span class="uploadBtn">Upload</span>
</label>



        <input type="button" id="add" onclick="addkid()" value="+" />

      </div></td></tr>
                <script>
                document.getElementById("uploadBtn" ).onchange = function()  {
            document.getElementById("uploadFile").value = this.value;
        };
    </script>


        </div></td></tr>

            <tr><td colspan=5 align=center>
                <input class="button" type=submit name=submit value=Place >
                <input class="button" type=reset name=reset value=Cancel> </td></tr>
            </table>

              </form>
</body>

 </body>
</html>

The CSS provided looks as follows:

* { margin:0; padding:0;font-family: Arial; }

#orders {
    padding: 0px 25px 25px;
    background: #dcdcfb;
    box-shadow: 
        0px 0px 0px 5px rgba( 255,255,255,0.4 ), 
        0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
    position:center;
    width:60%;
    margin: 20px;
}


/* Additional CSS rules can be added here */

...
...
...

If you need assistance in positioning the form at the center, feel free to ask for further guidance.

Answer №1

form {
    width: 980px;
    margin: 0 auto;
}

To set the width, simply use 980 pixels. Utilize the value of AUTO for the margin property, which will center the form horizontally on the page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unveil the socket connection using web sockets

My current setup involves a server generating a socket on port 8181. I am interested in accessing this socket from a web page viewed in Google Chrome version 14. It seems that direct access may not be feasible, as Chrome only supports Web Sockets and not s ...

Tips for personalizing the css styles of an alert box?

I am in need of customizing the alert box using CSS attributes. Currently, I am able to achieve a similar effect with the code below: JQUERY: $('<div class="alertMessage">Error first</div>') .insertAfter($('#componentName' ...

Angular's Conditional ng-if Error

Encountering an error link from Angular Js [1]http://errors.angularjs.org/1.2.10/$parse/lexerr?p0=Unterminated%20quote&p1=s%2013-14%20%5B'%5D&p2=recipe.ID%20!%3D%3D' I am struggling to implement the solution for this error. Any help wou ...

How to dynamically add table rows and cells with JavaScript using a single selection input

I am working on a project that involves a selection input with around 5 options. Additionally, there is an empty table that follows this format: <table> <tr> <td>X (for deletion)</td> <td>Option name</td> ...

Customize the columns of your Angular Material 2 table by defining them using TemplateRef and ngTemplateOutlet

Looking to create a flexible material table with the ability to utilize TemplateRef along with ngTemplateOutlet for generating columns. Check out this demo where I have employed the cards component within my custom material-table component. Inside the card ...

Do GPU-intensive animations get impacted by the CPU's load?

I have set up a special compositing layer for a div with the following unique styles: div { position: absolute; height: 50px; width: 50px; background: #900; top: 100px; left: 200px; will-change: transform; transform: translateZ(0); } Afte ...

Modify the color of the select element when it is in an open state

If you're new to Material UI, I have a select element that I would like to change the color of. When 'None' is selected, I want the background color of the input field above it to match the 'None' section. Then, when the dropdown m ...

Dynamic content moves unpredictably when adding or modifying TextBoxes or DropDownList items

Whenever I navigate from one textBox to another in my .aspx form, it starts jumping around. The problem is exacerbated when I switch focus to or from a DropDownList. I only have a few textboxes on the form and nothing complex like gridviews or labels. So ...

Menu options are unresponsive to clicks in the dropdown

Need help fixing my dropdown menu issue. Whenever I hover over the dropdown, it disappears before I can click on any items. Here is a snippet of the code causing the problem: #navContainer { margin: 0; padding: 0; padding-top: 17px; width: 220 ...

What is the best way to present a specific row layout using HTML and CSS?

Can someone assist me in creating rows of links in html+css with a specific layout? The desired format should follow this structure: (Psuedocode) <body class="class_with_minmaxwidth_set_in_css"> <div class="container"> <div class ...

There was an issue retrieving the value from the $.ajax() error function, as it returned [

After successfully receiving data from the input field and sending it to the database, everything seems to be working fine. However, when attempting to retrieve the data after sending it to the database, an error is encountered: [object HTMLInputElement]. ...

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue! I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a ...

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

JavaScript function to convert a string of characters into a readable time format

Is there a way to input a string in an 'input type="time"' field in my HTML code? <label class="item item-input"> <span class="input-label">Departure Time </span> <input type="time" ng-model="heur ...

In Internet Explorer 7, there appears to be a white box that covers up the content on our website beyond a

I'm feeling stuck and frustrated trying to solve this issue. I have a Mac and no access to an IE7 machine, so I've been using browserlab (which is slow) to make any changes and see if they help. Unfortunately, I haven't been able to fix the ...

Canvas drawImage function not displaying image at specified dimensions

I'm having trouble loading an image into a canvas using the drawImage function. Additionally, I've implemented drag functionality but found that when moving the image inside the canvas, it doesn't follow the mouse cursor in a linear manner. ...

Selenium mistakenly chooses the incorrect element by selecting the first sibling element instead of searching within the element itself

I've been trying to loop through a list of elements and display the text, but I've encountered a strange issue with Selenium. When I select an element inside another element, Selenium returns the element inside the first sibling element instead o ...