How can I format my html code to display elements at a particular position

Question

I was wondering, how can I position the elements in my html code? I heard there is something called frames which might help, but I'm not sure how it works. Basically, I want this login interface to be placed in the middle of the screen, instead of top left by default.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login</title>
  </head>
  <body>
    <form action="login" method="post">
      <h3>Employee Login</h3>
      <b>Employee ID:</b> <br />
      <input type="text"name="employee_id" size="20"><br /><br />
      <b>Password:</b><br />
      <input type="password" name="password" size="20"><br /><br />
      <input type="submit" value="Login"><br /><br />
    </form>
  </body>
</html>

score 1 · Accepted Answer · edited Jan 03 '16 at 12:51

1

You can do it with styling your form, give it an absolute position, then translate it to middle with transform: translate(-50%, -50%) ( Press 'Full page' to see result )

form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<form action="login" method="post">
  <h3>Employee Login</h3>
  <b>Employee ID:</b> <br />
  <input type="text"name="employee_id" size="20"><br /><br />
  <b>Password:</b><br />
  <input type="password" name="password" size="20"><br /><br />
  <input type="submit" value="Login"><br /><br />
</form>

edited Jan 03 '16 at 12:51

svenar

115
11

answered Jan 03 '16 at 12:41

elreeda

4,525
2
18
45

which part of the html file does form { go in? – Programmer Jan 03 '16 at 12:43
To that guy who vote down ? can you explain why and give other solution ? – elreeda Jan 03 '16 at 12:44
@programmer in your css file, or just open new tag `` and pass it inside this tag – elreeda Jan 03 '16 at 12:45
@John To be exact, I haven't downvoted your answer, since your's too is an answer, and not sure who did. – Snazzy Sanoj Jan 03 '16 at 12:47
1

@SnazzySanoj hi thanks mate, as I know if you ( not ou Snazzy the person who votedwon ) votedown you should give better than this solution – elreeda Jan 03 '16 at 12:50
@John Thanks for your answer John! By the way, could you please assist me with CSS perhaps? By the end of this project, I'll have lots of web pages and I want to apply a same font/colour/images to all pages. So this will definitely come in handy, I know nothing about CSS file though. By the way, i up voted your post as well, so it's back on 0 now. (i didn't down vote it) – Programmer Jan 03 '16 at 12:51
1

@John To be exact, I'm a beginner only :) – Snazzy Sanoj Jan 03 '16 at 12:54
I've +1 ed for speedy answer itself. – Snazzy Sanoj Jan 03 '16 at 13:00
@programmer welcome, try to get start here https://www.codecademy.com/learn/web ... codeacademy they have a good crouse, and of course if you have any question just ask we are here for help you – elreeda Jan 03 '16 at 13:00
@John Thank you very much John and Snazzy. I'm in my last year of high school and I have 6 months to complete this project (it's a payroll system project on Java eclipse IDE, apache tomcat server and mysql for database work. – Programmer Jan 03 '16 at 13:07

score 1 · Answer 2 · edited Jan 03 '16 at 12:56

You can use CSS to align the form in the middle of the screen,

Just add the following code between <style> and </style> parts of your html head section,

form {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  position: absolute;
}

So, your final HTML file would look like,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login</title>
  <style>
  form {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    position: absolute;
  }
  <style>
  </head>
  <body>
    <form action="login" method="post">
      <h3>Employee Login</h3>
      <b>Employee ID:</b> <br />
      <input type="text"name="employee_id" size="20"><br /><br />
      <b>Password:</b><br />
      <input type="password" name="password" size="20"><br /><br />
      <input type="submit" value="Login"><br /><br />
    </form>
  </body>
</html>

By using the above CSS, your form will be centered both horizontally and vertically.

Hope this helps :)

Thanks very much for your response Snazzy, sorry I already accepted an answer but it's an excellent response. — Programmer, Jan 03 '16 at 12:54

How can I format my html code to display elements at a particular position

2 Answers2