How to centre inout fields but keep text aligned to the left of the fields?

Question

I am trying to centre the fixed-width input fields on the page, and have the text align with the left edge of the input fields: sorry forgot the divs

      <style>
        td {border: 1px solid black;}

        input[type=text] {
            width: 50%;
            padding: 10px;
            box-sizing: border-box;
          }

        .AddFunction{
          position: center;
          text-align: left;
          margin-left: auto;
          margin-right: auto;
        }

      </style>

  <div class="AddFunction">
  <h2>Add Record</h2>
    <form action="crud.ctrl.php?act=insert" method="post">
      First Name: <br><input type="text" name="fname"> <br />
      Last Name: <br><input type="text" name="lname"> <br />
      Phone: <br><input type="text" name="phone"> <br />
      Email: <br><input type="text" name="email"> <br />
      Location: <br><input type="text" name="location"> <br />
      MC: <br><input type="text" name="mc"> <br />
      Position: <br><input type="text" name="pos"> <br />
      Department: <br><input type="text" name="dept"> <br />
      <input type="submit">
    </form>
  </div>

I doubt you will be able to achieve what you want with this HTML — Jon P, Feb 18 '18 at 21:51

score 0 · Answer 1 · answered Feb 18 '18 at 22:00

0

Let's fix you mark up to use label, which you should for form elements anyway.

label {
  display: block;
  width: 50%; 
  margin: 0 auto; /*This Centers the label block*/
}

input[type=text] {
  width: 100%;
  display: block; /*Give the input its own line*/
  padding: 10px;
  box-sizing: border-box;
}

<form action="crud.ctrl.php?act=insert" method="post">
  <label>First Name: <input type="text" name="fname"></label>
  <label>Last Name: <input type="text" name="lname"></label>
  <label>Phone:<input type="text" name="phone"> </label>
  <label>Email:<input type="text" name="email"> </label>
  <label>Location:<input type="text" name="location"> </label>
  <label>MC: <input type="text" name="mc"> </label>
  <label>Position:<input type="text" name="pos"> </label>
  <label>Department:<input type="text" name="dept"> </label>
  <input type="submit">
</form>

answered Feb 18 '18 at 22:00

Jon P

19,442
8
49
72

how you was able to answer after this get closed ? – Temani Afif Feb 18 '18 at 22:10
I'm just that good ;-) , that and I had started answering the question before it was closed. – Jon P Feb 18 '18 at 22:15
yes but you cannot post answer even if you start answering ... unless you post it then delete it then undelete it ? – Temani Afif Feb 18 '18 at 22:16
Nope, all I did was answer the question and click "Post answer". I just got to the question before it was closed. Besides, my answer provides a more direct answer than any of the linked question/answers. – Jon P Feb 18 '18 at 22:20
yes but look at the time of your answer and the time of close ... it's not logical for me – Temani Afif Feb 18 '18 at 22:20
How is it not logical? Hypothetical time line: OP is 12:00am, I view and start answering 12:01, You close 12:05, I hit submit answer with no page refreshes in the interim at 12:10. I never see the question as closed until after my answer has been submitted. I suggest this is more a question for https://meta.stackoverflow.com/ – Jon P Feb 18 '18 at 22:27
am not against you :) but if you don't hit the button before it get closed it won't work .... i faced this a lot of time, i start typing the answer and when i submit i cannot because it closed ... so the submit button should be the reference not when you start answering – Temani Afif Feb 18 '18 at 22:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165381/discussion-between-jon-p-and-temani-afif). – Jon P Feb 18 '18 at 22:37

How to centre inout fields but keep text aligned to the left of the fields?

1 Answers1