center heading in display:table-cell Options

[Jack42]

I am trying to center a h2 header in a form using display:table. I have everything lining up correctly except the headers. I created a jsfiddle to show the issue:
https://jsfiddle.net/rtkd95af/

I need Applicant Information centered above the label and input. What did I do wrong?

[pandy]

You haven't done anything to center it. Add 'text-align: center' to the form.pdfform rule.

I think display: table-row is an odd choice for the heading. I'd use table-cell. Neither do I understand why you need to display everything as table elements in the first place, but I guess you have a purpose with that.

[Christian J]

I think display: table-row is an odd choice for the heading. I'd use table-cell.

In theory "display: table-caption" seems logical to me, since it should make the H2 behave like a table's CAPTION element. But in practice it doesn't seem to change anything in my browsers, so you still need "text-align: center".

[Jack42]

You haven't done anything to center it. Add 'text-align: center' to the form.pdfform rule.

I think display: table-row is an odd choice for the heading. I'd use table-cell. Neither do I understand why you need to display everything as table elements in the first place, but I guess you have a purpose with that.

Thank you for the fix. I overlooked the simple thing.

I have to get the user to enter data into a bunch of fields and this is the only I can get the everything to line up.