How to align input fields?

Question

I have two table rows with Date and Time values. My input fields are not centered, I aligned my tr to left. So I'm trying to center input from first tr and second tr.

Here is example: https://jsfiddle.net/dmilos89/qyq9cp7j/

HTML code:

<tr align="left">
   <td class="dateTime">
      <label>Pick up Date</label>
      <input name="DateFrom" id="DateFrom" style="width:100px" size="10" maxlength="10" class="dtefld" value="">
      <label>Pick up Time</label>
      <input name="TimeFrom" id="TimeFrom" class="time" type="text" size="10" maxlength="10" value="">
   </td>
</tr>
<br>
<tr align="left">
  <td class="dateTime">
     <label>Drop off Date</label>
     <input name="DateTo" id="DateTo" style="width:100px" size="10" maxlength="10" class="dtefld" value="">
     <label>Drop off Time</label>
     <input name="TimeTo" id="TimeTo" class="time" type="text" size="10" maxlength="10" value="">
   </td>
</tr>

If anyone knows how to fix this please let me know. Thanks.

Possible duplicate of [How to align checkboxes and their labels consistently cross-browsers](http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) — Ryan, Jan 13 '16 at 19:28
Can anyone vote for this question because is marked as duplicate? — espresso_coffee, Jan 13 '16 at 19:43

score 3 · Accepted Answer · answered Jan 13 '16 at 19:27

3

This fixes it:

label {display: inline-block; width: 100px;}

Preview

answered Jan 13 '16 at 19:27

Praveen Kumar Purushothaman

164,888
24
203
252

@GCyrillus Forgot to add bro! `:P` – Praveen Kumar Purushothaman Jan 13 '16 at 19:33
2

This fixed the problem. Can you explain why I have to use display:inline-block and width:100px? – espresso_coffee Jan 13 '16 at 19:33
1

@user3023588 `inline-block` gives you a `block` element features like `width`, `height`, `padding` and `margin` and also, it doesn't take the full width like `block` level elements and behaves in consistent with `inline` elements. They are flowing elements with the characters of `block`. – Praveen Kumar Purushothaman Jan 13 '16 at 19:34
That make sense. Thank you! – espresso_coffee Jan 13 '16 at 19:36

How to align input fields?

1 Answers1